canvas 绘制、加载图片不清晰;jspdf生成的文件打开报110错误的解决方案(直接上代码)

背景故事:

    博主最近需要实现一个可在web页面上传多张图片,把上传的多张图片生成一个pdf文件的功能。实现思路是把图片加载到HTML页面中,通过canvas重新压缩、绘制以后,用jspdf.js生成pdf文件。用到的js库:jquery.js、jsPdf.js

遇到的问题:

    1、生成的pdf文件,图片很模糊,跟原图差距很大;

    2、打开的pdf文件,会报错(如下图)。错误信息:处理页面时发生错误,读取本文档时出现问题(110)


解决方案(代码):

function getBase64Image(img, configObj) {
    var dataURL, quality = 1.0;
    if (img.dataset.needcompressflag == "true") {
        quality = 0.7; // 压缩
    }
    var promise = new Promise(function (resolve, reject) {
        if (img.src && img.src.indexOf("base64") > 0) {

            // 解决图片不清晰的问题
            canvas.width = img.width * 2; // 关键代码: canvas的width、height属性用于管理画布尺寸
            canvas.height = img.height * 2; // 关键代码

            canvas.style.width = img.width + "px"; // 关键代码: canvas的style属性中的width、height正好是显示尺寸,即最终生成到pdf中的尺寸
            canvas.style.height = img.height + "px";

            var ctx = canvas.getContext("2d"), file, reader = new FileReader();
            ctx.scale(2, 2); // 关键代码: 图片绘制的时候 也放大两倍
            ctx.drawImage(img, 0, 0, img.width, img.height);
            dataURL = canvas.toDataURL("image/jpeg", quality);
            resolve(Object.assign({base64ImgStr: dataURL}, configObj));

            // 解决压缩后的base64str生成的pdf文件在电脑中打开会报错的问题(解决方法:生成临时文件,再读取一遍)
            /*file = new File([dataURLToBlob(dataURL)], "temp.jpg", {type: "image/jpeg"});
             reader.readAsDataURL(file);
             reader.onload = function (e) {
             var base64Img = e.target.result;
             // console.log("after:" + base64Img.length);
             resolve(Object.assign({base64ImgStr: base64Img}, configObj));
             };*/
        }
    });

写在最后:

    代码中标有"关键代码"的地方就是解决方案所在,其实也就5行左右的代码是提升图片清晰度的关键。

    生成的pdf打开报错的问题,后来又没有了,很奇怪(所以代码暂时注释掉了,当时也是费了好大劲才解决的)ヾ(=゚・゚=)ノ喵♪

    在此,要特别感谢另外一位博主的文章,给予了关于解决图片模糊问题 很清晰的解决思路。

    传送门:https://www.cnblogs.com/wmhuang/p/6477223.html

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页