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