移动端长按保存图片

最新推荐文章于 2024-03-01 17:22:45 发布

weixin_30897079

最新推荐文章于 2024-03-01 17:22:45 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yangwan/p/10331549.html

本文介绍如何使用HTML5的Canvas API结合QR码生成技术，实现网页上的复杂图形绘制和图片导出功能。通过具体代码示例，展示了如何设置画布尺寸、背景颜色、绘制带圆角的矩形、插入并裁剪头像图片、添加文字以及最终将Canvas内容转换为图片进行保存。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/canvas2image.js" type="text/javascript" charset="utf-8"></script>
<script src="js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body,html{
　　width: 100%;
　　height: 100%;
}
#myQrcontainer,#canvas_box,#imgShow{
　　width: 100%;
　　height: 100%;
}
</style>
</head>
<body>
<div id="myQrcontainer">
　　<canvas id="canvas_box"></canvas>
　　<img src="" id="imgShow"/>
</div>
<script type="text/javascript">
(function(){
var html=document.querySelector('html')
html.style.fontSize=window.innerWidth/7.5+'px'
window.onresize=function(){
html.style.fontSize=window.innerWidth/7.5+'px'
}
})()
//封装画矩形的方法
var _that =this;
function roundedRect(ctx,x,y,width,height,radius){
　　ctx.beginPath();
　　ctx.moveTo(x,y+radius);
　　ctx.lineTo(x,y+height-radius);
　　ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
　　ctx.lineTo(x+width-radius,y+height);
　　ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
　　ctx.lineTo(x+width,y+radius);
　　ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
　　ctx.lineTo(x+radius,y);
　　ctx.quadraticCurveTo(x,y,x,y+radius);
　　ctx.stroke();
};
function drawQrcode(){
　　var nWidth = document.body.clientWidth,//屏幕可视区域宽度
　　nHeight = document.body.clientHeight,//屏幕可视区域高度
　　_canvasWidth = document.body.clientWidth*2,//画布宽度
　　_canvasHeight = document.body.clientHeight*2;//画布高度
　　//开始画图，获取上下文；
　　var _canvas = document.getElementById("canvas_box");
　　_canvas.width = _canvasWidth;
　　_canvas.height = _canvasHeight;
　　var _context = _canvas.getContext('2d');
　　//背景
　　_context.fillStyle="#f3af4c";
　　_context.fillRect(0,0,nWidth*2,nHeight*2);
　　//白色矩形部分
　　_context.moveTo(40,203);
　　_context.strokeStyle = 'rgba(255,255,255,1)';
　　_context.fillStyle = 'rgba(255,255,255,1)';
　　_that.roundedRect(_context,40,70*2,335*2,489*2,10*2);
　　_context.fill();
　　_context.closePath();
　　var _imagehead = new Image();//头像
　　//如果有跨域问题，请给img对象添加如下属性
　　_imagehead.crossOrigin="anonymous";
　　_imagehead.src = 'http://img1.imgtn.bdimg.com/it/u=3664893832,2142990655&fm=26&gp=0.jpg';
　　_imagehead.onload = function(){
　　　　_context.save(); // 保存当前_context的状态
　　　　_context.beginPath();
　　　　_context.moveTo(((nWidth)/2+40/375*nWidth)*2,70.28/603*nHeight*2);
　　　　_context.lineWidth="20";
　　　　//画出圆
　　　　_context.arc(nWidth,70.28/603*nHeight*2,40/375*nWidth*2,0,2*Math.PI,true);
　　　　//圆有个边框
　　　　_context.lineWidth=20;
　　　　_context.strokeStyle = 'rgba(255,197,108,14)';
　　　　_context.fill();
　　　　_context.stroke();
　　　　//裁剪上面的圆形
　　　　_context.clip();
　　　　// 在刚刚裁剪的园上画图
　　　　_context.drawImage(_imagehead, (nWidth/2-40)*2, 30*2, 90*2, 90*2);
　　　　_context.restore();
　　　　_context.stroke();
　　　　//头像下面的文字
　　　　_context.beginPath();
　　　　_context.textAlign = "center";
　　　　//设置字体
　　　　_context.font = '30px Arial';
　　　　_context.lineWidth = 1.0;
　　　　_context.fillStyle = 'rgb(73,73,73)';
　　　　_context.fillText("任小超", nWidth, 150*2);

　　　　//onload是异步加载，所以要等第一个onload 加载完毕再画第二张图片
　　　　//代言文字图片
　　　　var _imagetext = new Image();
　　　　//解决跨域，如果有跨域错误信息一定要加此属性；
　　　　_imagetext.crossOrigin="anonymous";
　　　　_imagetext.src ='https://cdn.kaishuhezi.com/kstory/activity_flow/image/a0364809-6289-474e-a5da-4aca336541cb.png';
　　　　_imagetext.onload =function(){
　　　　　　_context.save(); // 保存当前_context的状态
　　　　　　_context.drawImage(_imagetext, (nWidth-200)/2*2, 170*2,200*2,25*2);
　　　　　　_context.stroke();//
　　　　　　_context.closePath();

　　　　　　//canvas 画完图一定要生成图片流，作为img 的src属性值，同时隐藏canvas，只展示img 就ok了，在手机上试试长按保存功能吧

　　　　　　var _imgSrc = _canvas.toDataURL("image/png",1);
　　　　　　_canvas.style.display="none";
　　　　　　var imgShow = document.getElementById('imgShow');
　　　　　　imgShow.setAttribute('src', _imgSrc);
　　　　}
　　}
}
drawQrcode();

</script>
</body>
</html>

转载于:https://www.cnblogs.com/yangwan/p/10331549.html