Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <title>Export and save the canvas as PNG</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
- <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
- <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
- <script src="libs/export_canvas/base64.js" type="text/javascript"></script>
- <script src="libs/export_canvas/canvas2image.js" type="text/javascript"></script>
- </head>
- <script type="text/javascript">
- var canvas;
- var stage;
- /**
- * Init
- */
- function init() {
- canvas = document.getElementById("canvas");
- stage = new createjs.Stage(canvas);
- // Enable touch support
- if (createjs.Touch.isSupported()) { createjs.Touch.enable(stage); }
- displayLabel();
- displaytemplate();
- }
- /**
- * Display Uplaoded Picture
- */
- displayLabel = function () {
- var image = new Image();
- // Invoked when the picture is loaded
- image.onload = function (event) {
- // Display Uplaoded Picture
- var upload = new createjs.Bitmap(event.target);
- upload.y = 50;
- upload.x = 170;
- upload.height = 50;
- upload.width = 50;
- stage.addChild(upload);
- stage.update();
- // Enable drag'n'drop on Picture
- enableDrag(upload)
- }
- image.src = "images/sample.jpg";
- }
- /**
- * Display Monalisa
- */
- displaytemplate = function () {
- var image = new Image();
- // Invoked when the picture is loaded
- image.onload = function (event) {
- // Display template
- var template = new createjs.Bitmap(event.target);
- stage.addChild(template);
- stage.update();
- }
- image.src = "images/2.png";
- }
- /**
- * Enable drag'n'drop on DisplayObjects
- */
- enableDrag = function (item) {
- // OnPress event handler
- item.onPress = function (evt) {
- var offset = { x: item.x - evt.stageX,
- y: item.y - evt.stageY
- };
- // Bring to front
- // Mouse Move event handler
- evt.onMouseMove = function (ev) {
- item.x = ev.stageX + offset.x;
- item.y = ev.stageY + offset.y;
- stage.update();
- }
- }
- }
- /**
- * Export and display the canvas as PNG in a new wind ow
- */
- function exportAndView() {
- var screenshot = Canvas2Image.saveAsPNG(canvas, true);
- var win = window.open();
- $(win.document.body).html(screenshot);
- }
- function download() {
- var screenshot = Canvas2Image.saveAsPNG(canvas, true);
- window.location = canvas.toDataURL("image/png")
- }
- function to_image() {
- Canvas2Image.saveAsPNG(canvas);
- }
- </script>
- <!-- --------------------------------------------------------------------------------End of image script-->
- <body onload="init()" >
- <canvas width="800" height="308" id="canvas">
- </canvas>
- <div style="position: relative" >
- <input type="button" value="View screenshot in a new page" onClick="exportAndView()" >
- <input type="button" value="View screenshot in a new page" onClick="download()" >
- <button onclick="to_image()">Draw to Image</button>
- </div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement