无法使用toDataURL（）快照HTML5画布 [英] Can not snapshot the HTML5 canvas using toDataURL()
本文介绍了无法使用toDataURL（）快照HTML5画布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在建立一个three.js动画，并尝试使用从HTML5 Canvas（readAsBinaryString）获取二进制（base64）数据。
I am building a three.js animation, and try to snapshot the animation throught HTML5 canvas feature using Getting binary (base64) data from HTML5 Canvas (readAsBinaryString).
我试过但没有成功，是白色空白，没有画布动画。我不知道是因为我的broswer支持，我使用Opera
I tried but with no success, the snapshot I got is white blank, without the canvas animation. I don't know it is because of my broswer support, I am using the Opera
这是我的整个代码
<!DOCTYPE HTML>
<html ng-app="Mainapp">
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body ng-controller="Main">
<button class="btn btn-danger" ng-click="cropImage()">
CropImage
</button>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script defer="defer">
// revolutions per second
var angularSpeed = 0.2;
var lastTime = 0;
// this function is executed on each animation frame
function animate(){
// update
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
cube.rotation.y += angleChange;
lastTime = time;
// render
renderer.render(scene, camera);
// request new frame
requestAnimationFrame(function(){
animate();
});
}
// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.id = 'world';
document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
// scene
var scene = new THREE.Scene();
// cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial());
cube.overdraw = true;
scene.add(cube);
// start animation
animate();
var angularT3 = angular.module('Mainapp', []);
angularT3.run(['$rootScope', '$location','$http', '$window', function ($rootScope, $location, $http, $window) {
//$http.defaults.headers.post['x-csrf-token'] = $cookies['XSRF_TOKEN'];
var canv = document.createElement('canvas');
canv.id = 'snapshot';
canv.width = window.innerWidth;
canv.height = window.innerHeight;
document.body.appendChild(canv);
}]);
angularT3.controller('Main', function ($scope,$http) {
$scope.cropImage = function (){
console.log('crop image');
var bgCanvas = document.getElementById('snapshot');
var mainCanvas = document.getElementById('world');
var bgContext = bgCanvas.getContext('2d');
bgContext.drawImage(mainCanvas, // source
400, 500, // source coordinates
200, 150, // source dimension
0, 0, // target coordinates
200, 150); // target dimensions
var jpegUrl = bgCanvas.toDataURL();
console.log(jpegUrl);
console.log(jpegUrl.length);
var abcUrl = mainCanvas.toDataURL();
//.toDataURL("image/png").replace("image/png", "image/octet-stream");
console.log(abcUrl);
window.open(abcUrl, "toDataURL() image", "width=600, height=200");
window.open(jpegUrl, "toDataURL() image", "width=600, height=200");
}
});
</script>
</body>
</html>
推荐答案
刚才找到解决方案， js工作，必须保持preserveDrawingBuffer为true
Just found the solution, in order to make three.js work, it is neccessary to keep the preserveDrawingBuffer as true
renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});
这篇关于无法使用toDataURL（）快照HTML5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
