首页 > 移动平台 > 详细

移动端 canvas插入多张图片生成一张可保存到手机图片

时间:2017-08-20 14:42:32      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:enter   裁剪   head.s   mage   多张图片   shu   contain   quad   font   

第一次写随笔,想把开发中遇到的问题与大家分享,可能会让您少走一步弯路。

先看下效果图:

技术分享

代码分三部分为大家展示:

1、html 部分

<div id="myQrcontainer">
  <canvas id="canvas_box"></canvas>
  <img src="" id="imgShow"/>
</div>

2、css 部分

body,html{
  width: 100%;
  height: 100%;
}
#myQrcontainer,#canvas_box,#imgShow{
  width: 100%;
  height: 100%;
}

移动端基于微信公众号开发,生成的图片可以唤起“保存图片”功能,但是点击“保存图片”没有反应;

解决方法:

1、canvas画完图之后要生成base64图片;动态添加到 img 的src中

    toDataURL();

2、跨域问题,一定给img对象添加

     img.crossOrigin="anonymous";

js部分:

 

//封装画矩形的方法
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 = ‘https://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();

 

移动端 canvas插入多张图片生成一张可保存到手机图片

标签:enter   裁剪   head.s   mage   多张图片   shu   contain   quad   font   

原文:https://www.cnblogs.com/rzcclub/p/7274683.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号