图片和canave互相转化

使用JavaScript将图片拷贝进画布

要想将图片放入画布里，我们使用canvas元素的drawImage方法：

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);

    return canvas;
}

返回值相当于canvas节点

这里的0, 0参数画布上的坐标点，图片将会拷贝到这个地方。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

绘制视频：

JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）：

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

用JavaScript将画布保持成图片格式

如果你的画布上的作品已经完成，你可以用下面简单的方法将canvas数据转换成图片格式：

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

返回值相当于img节点，canvas的 toDataURI （type , int ）如果type参数的值为image/jpeg或image/webp,则第二个参数的值如果在0.0和1.0之间的话,会被看作是图片质量参数

这段代码就能神奇的将canvas转变成PNG格式！

对于Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 这个错误，如果直接在本地运行该页面会报这个错误，在服务器下返回如下该页面就没有错误了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>File API Test</title>
    <script src="../js/jquery-2.0.3.min.js"></script>
    <style>
        #test{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
<input type="file" id="fileImg" >

    <img src="../img/b1.jpg" id="test" alt="">
    

<div id="new"></div>
<script>
    function convertImageToCanvas(image) {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                canvas.getContext("2d").drawImage(image, 0, 0,100,100);

                return canvas;
            }

            // Converts canvas to an image
            function convertCanvasToImage(canvas) {
                var image = new Image();
                   // image.crossOrigin = "Anonymous";
                image.src = canvas.toDataURL("image/png");
                /*image.src = '2.jpg';*/
                console.log(canvas.toDataURL("image/png"));
                return image;
            }

$(function(){
        // Get the image
        var images=document.getElementById("test");
                canvas = convertImageToCanvas(images);
            
            // Actions
            document.getElementById('new').appendChild(canvas);

            document.getElementById("new").appendChild(convertCanvasToImage(canvas));
                            
})
                     
</script>
</body>
</html>

posted @ 2017-11-17 15:07 申小贺阅读(456) 评论(0) 收藏举报

刷新页面返回顶部

申小贺