个人中心
gpt4 book ai didi

javascript - 如何使用相机API和设置图片到canvas标签

转载 作者：搜寻专家 更新时间：2023-10-31 08:32:45 24 4
gpt4 key购买 nike

我需要编写 html 代码，在 phonegap 中使用相机 API 并将图像设置为定义的 Canvas 。我在网上找到了一些应该可以工作的代码(还包括水印)，但它不会将任何内容返回到 Canvas 。有人能告诉我我错过了什么吗？我是 html 和 javascript 的新手，只是想弄清楚这个特定部分是如何工作的，然后再将其扩展以包含其他图像以叠加在从相机拍摄的照片的顶部。

谢谢

<!DOCTYPE html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-    1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">

var canvas;
var watermark;

document.addEventListener("deviceready",onDeviceReady,false);  

function onDeviceReady() {
    canvasDOM = $("myCanvas")[0];
    canvas = canvasDOM.getContext("2d");

    watermark = new Image();
    watermark.src = "q1.jpg";    
} 

function cybershot() {
    navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400,     targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI});
}

function camError(e) {
    console.log("Camera Error");
    console.log(JSON.stringify(e));
}


function camSuccess(picuri) {
    console.log("Camera Success");

    var img = new Image();
    img.src = picuri;

    img.onload = function(e) {
        canvas.drawImage(img, 0, 0);
        canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height);
    }  
} </script>


<style>
#myCanvas {
    width: 400px;
    height: 400px;
}
</style>


</head>
<body>
<h1>Watermark Camera</h1>


<button onclick="cybershot();">Capture Photo</button> <br>


<p>Canvas:</p>"

<canvas id="myCanvas"></canvas>
</body>
</html>

最佳答案

如果您的代码不需要 Canvas ，您可以使用此 fiddle 中概述的简单干净的方法:

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

或者，如果您确实需要使用 Canvas ，请参阅 this fiddle这表明您可以获取一个编程图像元素并将其绘制到 Canvas 上:

function onSuccess(imageData) {
    var image = new Image();
    image.src = "data:image/jpeg;base64," + imageData;
    image.onload = function () {
        var height = 100;
        var width = 100;
        context.drawImage(image, width, height);
    }
}

让我知道你是怎么处理的:)

关于javascript - 如何使用相机API和设置图片到canvas标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19283730/

24 4 0
文章推荐： html - margin :0 auto div improper arrangement on zoom
文章推荐： ios - 只向数组插入 10 个元素
文章推荐： html - Kendo UI 网格层次结构
文章推荐： swift - 带页眉和页脚的 NSCollectionView
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com