欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

从零开始学_JavaScript_系列（34）——将canvas获取的图片下载到本地

程序员文章站 2023-11-11 19:31:10
将canvas获取的图片下载到本地 1、概述 普通图像（非必须）=> canvas图像 => 转为base64字符串 => 赋值给a标签 => 触发a标...

将canvas获取的图片下载到本地

1、概述

普通图像（非必须）=> canvas图像 => 转为base64字符串 => 赋值给a标签 => 触发a标签的点击事件 => 下载

2、具体步骤

首先，你需要有一个canvas图像。

假如你有的仅仅是一个普通图片，请将其转为canvas图像（参考drawimage方法）

这个图像可能是你自己利用canvas的画笔画的，
也可能是你将一个图片通过drawimage方法绘制到canvas上，
甚至是video标签的截图，
或者是将html通过某种方式（比如svg）转为了canvas图像
但你得有，你可以通过以上方法获取。

其次，你需要拿到canvas这个dom，然后利用 canvas.todataurl("image/png") 这样的方法，来获取对应格式的base64字符串。
可以通过修改参数，将其转为png或者其他格式的图片的字符串；

var canvas = document.queryselector('canvas');
var src = canvas.todataurl("image/png");

第三，你需要在页面里有一个a标签，可以通过临时创建来获得，无需一定在dom树中。

然后将他的href属性设置为你之前获得的base64字符串，并且为其设置download属性（可以为空，作用是作为下载时的文件名）；

var dom = document.createelement("a");
dom.href = this.canvas.todataurl("image/png");
dom.download = new date().gettime() + ".png";

第四步，你需要触发这个a标签的点击事件，可以通过手动点击，或者js直接调用其click方法。

dom.click();

第五步，此时已经弹出了下载框，图片可以被下载到本地了。

3、demo

附庸摄像头拍摄，并将拍摄到的图像下载到本地的源代码
 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>将canvas获取的图片下载到本地</title>
</head>
<body>
<style>
    video, canvas {
        outline: 1px solid red;
    }
</style>
<p>这里通过拍照来获取你的图像，然后将其下载到本地。如果开启摄像头时有提示，请点击允许</p>
<button onclick="startvideo()">点击启用摄像头</button>
<button onclick="shoot()">点击拍照</button>
<button onclick="download()">点击下载</button>
<br>
<p>左侧是摄像头当前拍摄中区域，右侧图片是已拍摄的图像，下载的内容是右边已拍摄的图像</p>
<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>
 
<script>
    var video = document.queryselector('video');
    var canvas = document.queryselector('canvas');
 
    //启用摄像头，开始拍摄
    function startvideo() {
        // video捕获摄像头画面
        navigator.mediadevices.getusermedia({
            video: true,
        }).then(success).catch(error)
 
        function success(stream) {
            video.src = window.webkiturl.createobjecturl(stream);
            video.play();
        }
 
        function error(err) {
            alert('video error: ' + err)
        }
    }
 
 
    function shoot() {
        var context = canvas.getcontext('2d');
        //把当前视频帧内容渲染到画布上
        context.drawimage(self.video, 0, 0, 640, 480);
    }
 
    //将图片下载到本地
    function download() {
        var dom = document.createelement("a");
        dom.href = this.canvas.todataurl("image/png");
        dom.download = new date().gettime() + ".png";
        dom.click();
    }
</script>
 
</body>
</html>

 

上一篇： php像数组一样存取和修改字符串字符

下一篇： 学习php过程中的一些注意点的总结

推荐阅读