canvas合成

最新推荐文章于 2024-01-30 16:43:52 发布

np918

最新推荐文章于 2024-01-30 16:43:52 发布

阅读量192

点赞数

分类专栏： js 文章标签： canvas合成图片

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素结合JavaScript进行图片处理，包括动态调整画布大小、绘制背景图片及验证码图片，并通过Blob对象将处理后的图片转换为Base64编码，最终实现图片的下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5最重要的一块内容就是canvas画布，可以用js实现很多图片处理的功能。

    <canvas id="canvas"></canvas>
    <img src="img/codebg.png" id="bg">

	var w = document.documentElement.clientWidth || document.body.clientWidth;
	var h = document.documentElement.clientHeight || document.body.clientHeight;
	h-=70;
	var bg=document.getElementById("bg");
	var imgCode=sessionStorage.getItem("codeImg");
	var canvas="";
	bg.onload = function(){
	    canvas=document.getElementById("canvas");
	    canvas.width = w;
	    canvas.height = h;
	    var ctx=canvas.getContext("2d");
	    ctx.drawImage(bg, 0, 0, ctx.canvas.width, ctx.canvas.height);
	    var img= new Image();
	    img.src=imgCode;
	    img.οnlοad=function(){
	        ctx.drawImage(img, w-h/6.67-28, h-h/6.67-38, h/6.67, h/6.67);
	        downloadFile('tox.png', canvas.toDataURL("image/png"));
	    };
	};
	 
	function base64Img2Blob(code){
	    var parts = code.split(';base64,');
	    var contentType = parts[0].split(':')[1];
	    var raw = window.atob(parts[1]);
	    var rawLength = raw.length;
	    var uInt8Array = new Uint8Array(rawLength);
	    for (var i = 0; i < rawLength; ++i) {
	        uInt8Array[i] = raw.charCodeAt(i);
	    }
	    return new Blob([uInt8Array], {type: contentType});
	}
	function downloadFile(fileName, content){
	    var aLink = document.createElement('a');
	    aLink.className="button";
	    aLink.innerHTML="保存图片";
	    var blob = base64Img2Blob(content);
	    aLink.download = fileName;
	    aLink.href = URL.createObjectURL(blob);
	    document.body.appendChild(aLink);
	}

效果如下：
https://img-blog.youkuaiyun.com/20180612095635156

作者：风轻云淡180518
来源：优快云
原文：https://blog.youkuaiyun.com/qq_20343517/article/details/80661179
版权声明：本文为博主原创文章，转载请附上博文链接！