canvas生成图片模糊的解决方案

canvas生成图片模糊的解决方案

一般情况，在高清屏的设备下，任何绘制canvas中的图像、文字、线条、形状都可能会出现模糊的问题。可通过引入 GitHub 中的 hidpi-canvas 有效地解决。

1. 首先去 GitHub 下载 hidpi-canvas.js 文件：传送门；
2. 在项目中引入 hidpi-canvas.js 文件；
3. 调用 getPixelRatio( ) 函数，得到 ratio 值；
4. 在 drawImage( ) 中，将 width 和 height 乘以 ratio；
5. 效果如下，但抱歉，没做对比图！

在部分 iOS 设备中，可能会存在 load 失效的问题，会导致无法将图片画到 canvas 中。引起该现象的原因可能是：
1、iOS中存在 load 失效的问题（注意&#load 执行的前提是图片正常加载完成，如果稍微出错，就会执行 r 而不是 load）；
2、如果 image.src 是 base64 格式文件，不要设置 ssOrigin = "anonymous"，可能会出现 load 无法执行的问题，从而无法正常画图。

关于 onload 失效的问题，看 Stack Overflow 这个解答，可能收获挺多的：IPhone img onload fails。

// html
<div onclick="makeCanvasToPhoto()" style="width: 100px; padding: 10px 30px;background: #eee;text-align: center">生成图片</div>
<canvas id="canvasBox" style="margin: 50px auto"></canvas>
<!-- 引入js -->
<script type="text/javascript" src="canvas.js"></script>
<script type="text/javascript" src="hidpi-canvas.min.js"></script>// canvas.js 文件
function makeCanvasToPhoto() {var that = this;var canvas = ElementById("canvasBox");var context = Context('2d');var ratio = getPixelRatio(context);  // 关键代码canvas.width = 300 * ratio; // 画布宽度canvas.height = 300 * ratio; // 画布高度var divWidth = 300 * ratio; // 用于内容居中var divHeight = 300 * ratio; // 用于内容居中// 画矩形context.beginPath();context.fillStyle = "#abcdef";context.fillRect(0, 0, divWidth, divHeight);context.closePath();// 图片context.beginPath();var imgObj = new Image();ssOrigin = "anonymous";  // 在iOS 9设备中，如果src是base64格式，设置了crossOrigin 属性，会导致无法执行load 而执行r 函数imgObj.src = '=458129248,1588126214&fm=26&gp=0.jpg';load = function () {var imgWidth = '150';var imgHeight = '150';context.drawImage(this, 50, 50, imgWidth * ratio, imgHeight * ratio)};context.closePath();// 文本context.beginPath();context.font = '32px bold';context.fillStyle = '#1a1a1a';Align = 'center';Baseline = 'middle';context.fillText('文本', 50, 240);context.closePath();context.drawImage(canvas, 0, 0, divWidth, divHeight);var base64Obj = DataURL('image/png', 1);console.log(base64Obj);
}function getPixelRatio(context) {var backingStore = context.backingStorePixelRatio ||context.webkitBackingStorePixelRatio ||BackingStorePixelRatio ||context.msBackingStorePixelRatio ||context.oBackingStorePixelRatio ||context.backingStorePixelRatio || 1;return (window.devicePixelRatio || 1) / backingStore;
};

转载地址：