用画布画图，再长按保存图片

最新推荐文章于 2024-10-21 12:14:58 发布

hangGe0111

最新推荐文章于 2024-10-21 12:14:58 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签：画图

本文链接：https://blog.youkuaiyun.com/hangGe0111/article/details/81983192

Web 专栏收录该内容

48 篇文章

订阅专栏

本文介绍如何利用HTML5的Canvas元素进行图形绘制，并实现用户长按保存图片的功能。通过Canvas API，我们可以创建自定义的图形，结合移动端的touch事件，实现在移动端长按保存绘制的图片。

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

1.代码

/**网页不会成为图片保存**/

/**长按保存图片，只有img引入的src才有长按手机出现保存图片或者扫描二维码**/

/**（例如在手机的扫码图片不能为background-image引入资源而必须为img通过src引入）**/

/**所以对于网页不能保存图片，但是canvas可以通过canvas。toDataURL("image/jepg",0.8)转为base64，**/

/**然后通过img的src引入，就变为了图片，就可以实现长按保存**/





<img id="tupianpic"/ style="display: none;">
<!-------------------生成图片部分----------------------->
<!--画板-->
<div class="sharePannel abs" style="display:none;">
	<canvas id="canvas" width="750" height="1334"></canvas>
</div>
<!--图片层-->
<div class="popPic abs" style="display: none;"></div>
/**canvas的宽高只能通过canvas标签里的width/height来设置，或者通过document.getElementById("canvas").width=600;**/

/**(或者document.getElementById("canvas").height=600;)**/

/**************画布部分******************/
// 图片加载函数 start
function PicLorder(n) {
	this.list = n;
	this.length = n.length;
	this.step = 0;
	this.pic ={};
}

PicLorder.prototype.completeAll = function(fn) {
	var that = this
	if(that.step < that.length) {
		var image = new Image();
		//console.log(that.step);
		if(!that.fn){
			that.fn = fn;
		}
		image.name = that.list[that.step].id;
		image.src = that.list[that.step].src;
		that.pic[image.name] = image;
		image.onload = function() {
			//console.log("The picture '" + image.name + "' is completed");
			that.step++;
			that.completeAll(n);
		}
	}
	else{
		//console.log("All completed");
		that.fn();
	}
}
	
PicLorder.prototype.getResult = function(id) {
		return this.pic[id];
}
//图片加载函数end
var n = [{
		id: 'bg',
		src: "images/sharebg.png"
	},{
		id: 'personpic',
		src: "images/tjpic.png"
	},{
		id: 'messagepic',
		src: "images/1.png"
	},{
		id: 'saoma',
		src: "images/saoma.png"
	},{
		id: 'indexfirst',
		src: "images/indexmyfirst.png"
	},{
		id: 'indexfirsthere',
		src: "images/indexmyfirsthere.png"
	},{
		id: 'junjiaorangebg',
		src: "images/orangebg.png"
	},{
		id: 'junjiachenzao',
		src: "images/chenzao.png"
	}];


$(function() {
	var CanvasDrawr = function(options) {
		var canvas, ctx, that = this;
		var self = {
			init: function() {
				// 初始化
				that.canvas = canvas = document.getElementById(options.id);
				that.ctx = ctx = canvas.getContext("2d");
				canvas.style.width = '100%';
				canvas.style.height = "100%";
				//console.log(canvas.style.height);
			}(),
			draw: function() {
				//绘制背景
				ctx.drawImage(loader.getResult('bg'), 0, 0, 750, 1332);
			}(),
			draw1: function() {
				/**对于圆形头像，先裁剪一个圆形然后再在裁剪的地方画图，对于圆角矩形同理**/
				var obj = loader.getResult('personpic');
				ctx.save(); // 保存当前ctx的状态
				ctx.arc(157,302,52,0,2* Math.PI); //画出圆
				ctx.clip(); //裁剪上面的圆形
				ctx.drawImage(obj, 102, 248, 109, 112); // 在刚刚裁剪的园上画图
				ctx.restore(); // 还原状态
			}(),
			draw2: function() {
				/**社区房子图片**/
				var obj = loader.getResult('messagepic');
				ctx.save();
				ctx.arc(0,0,268,0,2* Math.PI); //画出圆
			    ctx.roundRect(75, 528, 268, 186, 6);
			    ctx.clip(); //裁剪上面的矩形
			    ctx.drawImage(obj, 75, 528, 268, 186);
			    ctx.restore(); // 还原状态
			    ctx.roundRect(0, 0, 268, 184, 6);
			}(),
			draw3:function(){
				// 绘制文本区域	
				ctx.font = "27px Microsoft YaHe";
				ctx.fillStyle="#fff";
				ctx.textAlign = "start";
				ctx.fillText(options.message[0].messageone, 76, 750,261);
				ctx.fillText(options.message[1].messageone, 76, 779,261);
				ctx.font = "bold 30px Microsoft YaHe";
				ctx.fillText(options.message[2].messageone, 76, 815,261);
			}(),
			draw4:function(){
				// 绘制二维码
				var obj = loader.getResult('saoma');
				ctx.drawImage(obj, 293, 1109, 157, 155);
			}(),
			draw5:function(){
				// 绘制文字//我的第一套房在这里
				var obj1 = loader.getResult('indexfirst');
				var obj2 = loader.getResult('indexfirsthere');
				ctx.drawImage(obj1, 256, 259, 419, 58);
				ctx.drawImage(obj2, 290, 335, 268, 58);
			}(),
			draw6:function(){
				var obj1 = loader.getResult('junjiaorangebg');
				var obj2= loader.getResult('junjiachenzao');
				//有//楼盘当前均价部分
				ctx.fillText(options.message[3].messageone, 430, 583,261);
				ctx.drawImage(obj1, 430, 617, 227, 51);
				ctx.font = "bold 34px Microsoft YaHe";
				ctx.fillText(options.message[4].messageone, 447, 655,188);
				ctx.drawImage(obj2, 424, 705, 247, 84);
				
				//没有//楼盘当前均价部分
				/*ctx.drawImage(obj2, 424, 623, 247, 84);*/
				
				
			}()
			
		};
		zhuanma=canvas.toDataURL("image/jpeg",0.8);
		//console.log(zhuanma);
		$("#tupianpic").attr('src',zhuanma);  
		
		
	};
	CanvasDrawr.prototype.getPic = function() {
		var image = canvas.toDataURL();
		$(".popPic").append('<img src="' + image + '">');
	};
	//圆角矩形
	CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
	    var min_size = Math.min(w, h);
	    if (r > min_size / 2) r = min_size / 2;
	    // 开始绘制
	    
	    this.beginPath();
	    
	    this.moveTo(x + r, y);
	    this.arcTo(x + w, y, x + w, y + h, r);
	    this.arcTo(x + w, y + h, x, y + h, r);
	    this.arcTo(x, y + h, x, y, r);
	    this.arcTo(x, y, x + w, y, r);
	    
	    this.closePath();
	    return this;
	};
	
	
	var loader = new PicLorder(n);
	loader.completeAll(function() {
		var c = new CanvasDrawr({
			id: "canvas",
			//goal: title
			message:message
		});
		c.getPic();
	})
});