html2canvas的那些事:如何生成高清canvas图片

前几天产品提出一个问题,教师端app绘制出的用于微信分享的排行榜图片像素比较差,部分老师不愿意分享。针对这个问题,我去尝试做了一些优化。

方案一:
原理如下:先画个2倍的所谓的渣像素的图片,然后缩小2倍显示。
代码如下:(最终生成base64)

        getBase64 (ref) {
             returnnewPromise ((resolve) => {
                   setTimeout(() =>{
                           var _canvas = document.createElement(“canvas”),
                                  w = ref.offsetWidth,
                                  h = ref.offsetHeight;
                           _canvas.width = w * 2;
                           _canvas.height = h * 2;
                           _canvas.style.width = w + “px”;
                           _canvas.style.height = h + “px”;
                           var context = _canvas.getContext(“2d”);
                           //然后将画布缩放,将图像放大两倍画到画布上
                           context.scale(2,2);
                           html2Canvas(ref, {
                                canvas: _canvas,
                                onrendered: (canvas) => {
                                       resolve(canvas.toDataURL(“image/png”));
                                }
                           });
                    });
               });
           }
但是遇到一个问题:部分安卓手机,比如华为P9,会崩掉,猜测是Hbuiler打开webview的内存限制,而oppo R9就可以绘制出高清的图片。由于不能适配所有手机,故没有采用这种方案。
方案二:

如果保存为JPEG图片,还可以通过第二个参数指定图片质量:

var imgsrc = myCanvas.toDataURL('image/jpeg', quality);

quality的取值范围为0.0-1.0,0.0代表图片质量最差,1.0代表图片质量最好。

但是,此方案需要客户端修改截取base64数据的位数,即客户端需要更新,暂时放弃此法,可作为以后参考用。

目前,优化搁浅,尚未找到合适的方案。后面我会尝试确认方案一中手机崩掉的具体原因,并尝试解决。网上很多人都是通过该方法解决canvas绘制图片的清晰度的问题的,证明此法应该是行得通的,可能是自己哪里配置/写法有问题。

如有好的意见或者方法,欢迎提出来。我也会持续跟进更新这个问题。。。

发表评论

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