场景:比如移动端签名,一张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即为你自定义大小的图片文件
交流
1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解 群号: 856402057
2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!