canvas 绘制、加载图片不清晰；jspdf生成的文件打开报110错误的解决方案（直接上代码） |
您所在的位置：网站首页 › 读取本文档时出现问题(110) › canvas 绘制、加载图片不清晰；jspdf生成的文件打开报110错误的解决方案（直接上代码） |
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 |
【本文地址】
今日新闻 |
推荐新闻 |