Teach you how to draw a simple poster with canvas

Lala, first of all, let's talk about the demand. The product wants users to share a picture in our app to wechat, qq and other platforms. The picture contains the user's name, head image, and QR code with their own information. Then, how to generate this poster~~~
First of all, our boss told me that there is a plug-in called html2canvas, whose function is to convert dom nodes into images, which is a good thing. I tried it, it's OK, but ~ this plug-in is a little big, it's a shame to introduce such a big thing to meet the demand of posters!!! So, I'd better draw one myself~
First up the renderings

Dangdang ~ ~ ~ the poster generated in the end includes the head image, name and QR code. Of course, the QR code in the figure is Baidu's QR code ~ base64 is generated in the end to share with major platforms.
Don't talk too much nonsense, go to the code (this code hasn't been sorted out, because it's lazy...)

<canvas id="myCanvas" width="750" height="1200" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>

The dom node is very simple. Just create a canvas tag and write some attributes at will~

var canvas = document.getElementById("myCanvas");   //Get canvas node
function imageToCanvas(canvas,url1,url2,code) {      //Incoming canvas node background image url1 head image url2 QR code
    var ctx = canvas.getContext("2d");  
    var img1 = new Image();                               
    img1.src = url1;                     //The previous one doesn't explain. Generate a picture
    img1.onload = function(){ 
        ctx.drawImage(img1,0,0);              //When the image is loaded, it is assigned to the canvas starting from 0 0.
        var img2 = new Image();
         img2.src = url2;
         img2.onload = function(){
          ctx.save();                            //Save current canvas state
          ctx.arc(374, 134, 44, 0, 2 * Math.PI);    //The cutting operation cuts the head of a square into circles
          // Cut the circle out of the canvas
          ctx.clip();                             //Tailoring
          ctx.drawImage(img2, 330, 90, 88, 88);   //Put in img2, size 88 at 330 90
          ctx.restore();                           //Release canvas state
          ctx.font="28px Arial";
          ctx.textAlign="center";
          ctx.fillStyle ='#FFFFFF '; / / set the text property to center
          ctx.fillText("Your name is Shenma",375,220);     //The text here is dead. In practice, it's ok to pass multiple parameters
          var img3 = new Image();
          img3.src = code;
          img3.onload = function() {
              ctx.drawImage(img3,136,554,478,478);      //The same with image
              var imgCode = convertCanvasToImage(canvas);    //Convert picture to base64
              console.log(imgCode.getAttribute('src'))
          }

         }
    }

}
imageToCanvas(canvas,"1.png",'3.jpeg','code.png');            //Initialization


function convertCanvasToImage(canvas) {
    var image = new Image(); 
    image.src = canvas.toDataURL("image/png");            //canvas to img
    return image;
}

In this way, you can get a base64 and use it.

Tags: Front-end

Posted on Mon, 02 Dec 2019 08:45:17 -0800 by jguy