场景：比如移动端签名，一张canvas画布，在任意位置书写之后，生成一张图片，如果这种图片要放到某一个签名的位置会显的特别大，我们来解决这个问题
一、生成canvas图片
通过 canvas.toDataURL('image/png', 1) 生成一张base64的canvas图片，也可以是你自己的其他图片
/** * resize 生成自定义大小的图片 * @param {String} datas 图片原文件 * @param {Number} wantedWidth 修改后的宽度 * @param {Number} wantedHeight 修改后的高度 * @returns */ function resizedataURL(datas, wantedWidth, wantedHeight){ return new Promise(async function(resolve,reject){ var img = document.createElement('img'); img.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = wantedWidth; canvas.height = wantedHeight; ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight); var dataURI = canvas.toDataURL(); resolve(dataURI); }; img.src = datas; }) }
二、调用方法
// 生成一张大小为 255 * 250 的图片 var newDataUri = await this.resizedataURL(canvas.toDataURL('image/png', 1), 255, 250); var encodeImages = encodeURI(newDataUri);
最后 encodeImages 即为你自定义大小的图片文件
