div内容转成图片:html2canvas→ canvas2Image(高清)

实现背景:需要把div内容转成图片保存到本地进行分享

用到两个js库

  • html2canvas.js
    http://html2canvas.hertzen.com/
  • canvas2Image.js
    https://github.com/hongru/canvas2image/blob/master/canvas2image.js

具体案例地址:
http://w.910app.com/act/love/

//    点击将div内容转换成为canvas——再转成图片-高清(但是也损耗性能)
//    引入html2canvas.js
        $('#btn-save').click(function () {
            $(this).hide();
            var dom=$("#textArea"); //你要转变的dom
            var width = dom.width();
            var height = dom.height();
            var type = "png";
            var scaleBy =1.8;  //缩放比例(缩放越大越高清,当然性能也越差)
            var canvas = document.createElement('canvas');
            canvas.width = width * scaleBy;
            canvas.height = (height * scaleBy)+1000;  //1000是我处理完后发现短了一点,具体为什么不清楚,如果你也少的话,根据自己的项目调吧
            canvas.style.width = width * scaleBy + 'px';
            canvas.style.height = height * scaleBy + 'px';
            var context = canvas.getContext('2d');
            context.scale(scaleBy, scaleBy);
            var opts = {
                scale:scaleBy, // 添加的scale 参数
                canvas:canvas, //自定义 canvas
                logging: true, //日志开关
                width:width, //dom 原始宽度
                height:height //dom 原始高度
            };
            html2canvas(dom[0], opts).then(function (canvas) {
                console.log(canvas);
                //处理完后将dom隐藏,如果一开始就隐藏的话,canvas出不来,不知道大家是不是这样
                dom.css("display","none");
                //如果想要生成图片 引入canvas2Image.js 下载地址:
                //https://github.com/hongru/canvas2image/blob/master/canvas2image.js
                $('#textArea').hide();
                var img = Canvas2Image.convertToImage(canvas, canvas.width * scaleBy, canvas.height *scaleBy,type);
                $("#print-img").append(img);//这是放大了1.8倍的图片

                //start---------------------------处理安卓移动端兼容问题
                //大部分安卓机器不支持直接点击data:img保存到本地,所以需要把获取到的data:img传递给服务端进行处理,处理完成之后返回一个图片的url,那么即可兼容安卓设备
                 var dataimg=  $('#print-img img').attr("src");
                //var dataimg="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
                $.ajax({
                    type: "POST",
                    url: '/api/qixi/img',
                    data:{"data_img":dataimg},
                    dataType: "json",
                    success: function(json) {
                        if(json.code==0){
                            $('#print-img img').attr("src",json.src);
                        }
                    }
                });
                 //end---------------------------处理安卓移动端兼容问题
                 $("#print-img img").css("width",width+'px').css("height",height+'px');//在将放大的图片用css缩小,在手机上就非常清晰了
                $('.loading').hide();
            });
        });

以下是服务端demo:

data:img转换成为url的过程(PHP)

    public function _img()
    {
        try {
            if (empty($_POST['data_img'])) {
                throw new Exception('参数错误1', -1);
            }
            $dataImg = $_POST['data_img'];
            if (!preg_match('/data:([^;]*);base64,(.*)/', $dataImg, $matches)) {
                throw new Exception('参数错误2', -1);
            }
            $content                 = base64_decode($matches[2]);
            $uniqid                  = uniqid();
            $dir                     ="/www/image.512app.com/qixi/";
            !is_dir($dir) && mkdir($dir);
            $file                    = $dir . $uniqid . '.png';
            file_put_contents($file, $content);
            echo json_encode(array('code' => 0 , 'src' => 'http://image.512app.com/qixi/' . $uniqid . '.png'));
        } catch (Exception $e) {
            echo json_encode(array('code' => -1, 'msg' => $e->getMessage()));
        }
    }

!!!注意:

例如截图区域:刚好存在另外的图片;图片的地址是跨域的;那么就会出现;截图不完整的情况啦(解决办法)
1:图片换成同域的
2、将图片转换成为base64的格式就可以拉~

发表评论

电子邮件地址不会被公开。 必填项已用*标注