移動端 canvas插入多張圖片產生一張可儲存到手機圖片

來源:互聯網
上載者:User

標籤:上下   raw   store   url   height   blog   alt   amp   pat   

第一次寫隨筆,想把開發中遇到的問題與大家分享,可能會讓您少走一步彎路。

先看下:

代碼分三部分為大家展示:

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 = ‘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();

 

移動端 canvas插入多張圖片產生一張可儲存到手機圖片

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.