Solve the problem of using canvas to generate invitation posters with wechat avatars without wechat avatars


Recently, I made a H5 page visited in wechat, long press the sharing picture to send the poster invited by friends, search the information on the Internet, come up with the solution, and use canvas to draw the page to generate pictures,

Problem: Canvas images cross domain.

Solution process (pit filling process):

1. From the Internet, there is a solution as shown in the figure img. Crossorigin = “” (professional mining pit, several years). The pro test is invalid. I don’t understand.



2. There are back-end service solutions on the Internet

Set header header or nginx service configuration to allow access. However, there are some problems (most of the pictures are stored on the third-party CDN for optimization). This is a third-party configuration. It’s hard to control whether it’s allowed or not.)


3. Solution: use all image paths and convert them to Base64 stream for processing. Save the picture as a local picture. This can also avoid cross domain problems.


Finally, personal solution: the third method is not used to save the local image, which will increase the local image, and there will be a problem that the local and wechat end are not updated synchronously, not the latest user’s head image. Personal is to use remote download to directly draw the output picture, so that the picture becomes a local picture, to solve the canvas drawing picture does not support cross domain problem.

Wxheadimg.aspx page code:

if (!string.IsNullOrEmpty(Request.QueryString["data"].ToString()))
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Request.QueryString["data"].ToString());
            request.Timeout = 3000;
            WebResponse response = request.GetResponse();
            Stream stream = response.GetResponseStream();

            Bitmap image = new Bitmap(stream);
            //Save as PNG to memory stream  
            MemoryStream ms = new MemoryStream();
            image.Save(ms, ImageFormat.Png);

            //Re output head image


Canvas drawing page reference:


The canvas drawing code also comes out by the way:

window.onload = function ()
    var IMAGE_URL;
    function takeScreenshot(){
        Var sharecontent = document.getelementbyid ('sharemember '); // the wrapped (native) DOM object that needs the screenshot
        Var width = sharecontent.offsetwidth; // get DOM width
        Var height = sharecontent.offsetheight; // get DOM height
        Var canvas = document. CreateElement ("canvas"); // create a canvas node

        Var scale = 1; // define any magnification to support decimal
        Canvas. Width = width * scale; // define canvas width * scale
        Canvas. Height = height * scale; // define canvas height * scale
        Canvas. Getcontext ("2D"). Scale (scale, scale); // get the context and set scale

        //Var rect = sharecontent. Getboundingclientrect(); // get the offset of the element from the inspection
        //Canvas. Getcontext ("2D"). Translate (- rect. Left, - rect. Top); // set the context position to a negative value relative to the window offset, and reset the picture
        var opts = {
            Scale: scale, // scale parameter added
            Canvas: canvas, // custom canvas
            Logging: true, // log switch
            Width: width, // DOM original width
            Height: height, // DOM original height
            backgroundColor: 'transparent',
        html2canvas(shareContent, opts,{useCORS:true,logging:true}).then(function (canvas)
            IMAGE_URL = canvas.toDataURL("image/png");

Page code:

.shareBox .copyImage{position:absolute;top:0px;left:0px;z-index:999;opacity:0;height:666px;width:666px;}


Finally: everyone for me, I for everyone, beauty and sharing