将任意图像转成 HTML5 Canvas

最新推荐文章于 2022-10-09 23:37:56 发布

转载最新推荐文章于 2022-10-09 23:37:56 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/558276/blog/77383

文章标签：

#python

本文介绍了一段JavaScript代码，演示如何通过输入任意图像URL，并点击按钮将其转换为Canvas画布上的图案。代码包括获取图像、设置Canvas尺寸、创建模式并绘制图像到Canvas的过程。

2019独角兽企业重金招聘Python工程师标准>>>

在开始讲解技术细节之前请先看这个演示程序，输入任意的图像URL，然后点击 Img2Canvas 按钮

BTW: 同样接受 data-uri 格式数据。

代码：

 
    01function draw() {

    02        // Get the canvas element and set the dimensions.

    03        var canvas = document.getElementById('canvas');

    04        canvas.height = window.innerHeight;

    05        canvas.width = window.innerWidth;

    06  

    07       // Get a 2D context.

    08        var ctx = canvas.getContext('2d');

    09  

    10        // create new image object to use as pattern

    11        var img = new Image();

    12        img.src = document.getElementById('url').value;

    13        img.onload = function(){

    14            // Create pattern and don't repeat!

    15           var ptrn = ctx.createPattern(img,'no-repeat');

    16           ctx.fillStyle = ptrn;

    17           ctx.fillRect(0,0,canvas.width,canvas.height);

    18  

    19        }

    20 }

应用逻辑：

关键的地方在于 createPattern()

nsIDOMCanvasPattern createPattern(in nsIDOMHTMLElement image, in DOMString repetition);
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

 
    01var img = new Image,

    02   canvas = document.createElement("canvas"),

    03   ctx = canvas.getContext("2d"),

    04   src = "http://example.com/image"; // insert image url here

    05 

    06  img.crossOrigin = "Anonymous";

    07 

    08   img.onload = function() {

    09     canvas.width = img.width;

    10     canvas.height = img.height;

    11     ctx.drawImage( img, 0, 0 );

    12    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );

    13  }

    14 

    15  img.src = src;

    16  // make sure the load event fires for cached images too

    17  if ( img.complete || img.complete === undefined ) {

    18     img.src ="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

    19     img.src = src;

    20 }