Я создаю анимацию three.js и пытаюсь сделать снимок анимации с помощью функции холста HTML5, используя Получение двоичных (base64) данных из HTML5 Canvas (readAsBinaryString).
Я пытался, но безуспешно, снимок, который я получил, белый, без анимации холста. Я не знаю, это из-за поддержки моего браузера, я использую 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>
