Tag: html5 canvas

将toDataUrl base64字符串转换为页面上的图像

我创建了一个自定义产品配置器，我使用html2canvas生成一个base64编码的canvas元素字符串。 如果您访问： http ： //faithpointdallas.com/ecom/page/customStole，您可以看到当您单击底部的“添加到购物车”时，它会使用html2canvas脚本来警告生成的base64编码字符串。 我的问题是：我如何获取base64编码的字符串并将其转换为常规图像标记。 喜欢 以下是生成字符串的代码： $(‘#addToCart’).click(function(event) { event.preventDefault(); var target = $(‘.customstole’); html2canvas(target, { onrendered: function(canvas) { var data = canvas.toDataURL(); alert(data); // data is the Base64-encoded image } }）; }）;

如何减少JSPDF创建的文件大小？

我正在使用jspdf.js从HTML 5canvas创建pdf。 但是，无论内容是什么以及canvas大小有多大，生成的文件大小始终为32,874 KB，即使canvas完全为空。 为什么文件大小始终相同？ jsPDF版本是1.1.135。 我的代码是这样的： var imgData = canvas.toDataURL(“image/jpeg”, 1.0); var width = $(“canvas”).attr(‘width’); var height = $(“canvas”).attr(‘height’); var pdf = new jsPDF(‘p’, ‘pt’, [width,height]); pdf.addImage(imgData, ‘JPEG’, 0, 0, width, height); pdf.save(“download.pdf”); 更新：完整代码： $scope.rasterizePDF = function() { if (!fabric.Canvas.supports(‘toDataURL’)) { alert(‘This browser doesn\’t provide means to serialize canvas to an image’); } else […]

通过AJAX发布canvas blob：阻止/删除本地缓存

我正在通过AJAX使用如下方法将canvas图像上传到我的服务器： myCanvas.toBlob( function( blob ) { var fdata = new FormData( ); fdata.append( ‘myFile’, blob ); $.ajax( { url: ‘http://myScript.foo’, type: ‘POST’, data: fdata, processData: false, contentType: false } ); }, ‘image/jpeg’, 0.9 ); （感谢https://stackoverflow.com/a/8244082/1180785 ） 但根据Mozilla的说法， toBlob […]返回表示canvas中包含的图像的Blob对象; 此文件可以缓存在磁盘上，也可以由用户代理自行决定存储在内存中 （ https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement ） 对于我的程序来说，保留图像非常重要（不是限制，而是作为隐私问题）。 所以我需要知道是否有保证可以删除这个可能的缓存副本，以及何时删除。 还有取消删除程序找到它的潜在风险，所以我想知道我是否可以覆盖数据或以其他方式强制安全删除。 如果可以在不冒本地缓存副本的情况下实现相同的结果，那就更好了。 如果可能的话，加密也是一种选择。 我只关心现代浏览器，专门支持getUserMedia ，所以没有IE（我有一个Flash回退用于处理内存中所有内容的旧浏览器）。

Sketch.js pageX未定义错误

我在我的phonegap应用程序中使用了intridea的sketch.js。它可以正常修改 case ‘touchstart’: if (this.painting) {//add this.stopPainting(); //add }//add this.startPainting(); break; 通过将以上行添加到代码中。但是我得到一个pageX未定义的错误，这会导致我的应用程序崩溃。 01-23 19:53:59.342: E/Web Console(31932): Uncaught TypeError: Cannot read property ‘pageX’ of undefined at file:///android_asset/www/js/external_libs/sketch.js:107 如何克服这个问题，任何帮助将不胜感激。谢谢

撤消/重做不正常，缩放后绘画也不能正常工作

我正在尝试使用撤消和重做function实现一个油漆桶工具。 问题是undo和redo第一次正常工作，但是当我多次撤消重做时，代码失败了。 任何人都可以帮我解决这个问题吗？ 此外，缩放function正常，但缩放后绘画无法正常工作。 这是我的完整代码。 你可以复制粘贴，它将在你的最后工作。 Painitng body { width: 100%; height: auto; text-align: center; } .colorpick { widh: 100%; height: atuo; } .pick { display: inline-block; width: 30px; height: 30px; margin: 5px; cursor: pointer; } canvas { border: 2px solid silver; } Zoom In Zoom Out Undo Redo var colorYellow = { r: 255, […]

Ipad或移动Safari浏览器上的HTML5 Canvas触摸事件偏移量

我遇到了一个问题，我无法通过Google解决这个问题，这是我在stackoverlow上的第一篇文章。 我有两个相互叠放的帆布元素，在我的公司网站上创建一个彩票类型刮擦function。 问题是，在Ipad上，如果我向下滚动页面甚至像素，触摸位置关闭等于滚动的高度。 我尝试了几种不同的路线来尝试解决这个偏移问题无济于事。 使用的JS库：Jquery1.6.4和kinetic2d1.0.2 http://www.kineticjs.com/用于移动触摸事件检测。 我没有非常使用safari mobile，所以我认为有一些属性或方法来确定我不知道的偏移量。 我想要一个解决这个问题的JS解决方案，但任何让我到终点线的黑客都会获胜。 提前致谢。

在将src动态设置为dataURI时，Img.onload不会触发

当imgGraph的src加载了生成的dataURI时，我无法触发onLoad处理程序。 dataURI是使用canvas从d3.js可视化（svg）生成的。 var canvas = document.getElementById(visual + ‘-canvas’); if(visual == “graph”){ console.log(‘graph logic n stuff’) canvas.width = 558; canvas.height = 558; var graph = d3.select(‘#graph-svg’).node(); var svg_xml = (new XMLSerializer()).serializeToString(graph); var imgGraph = new Image(); var context = canvas.getContext(‘2d’); var imageData; imgGraph.onload = function(){ console.log(‘img loaded’) context.drawImage(imgGraph, 0, 0); imageData = getImgData(canvas); console.log(imageData) def.resolve(imageData) } […]

如何消除canvas中的图像重叠（kineticjs）

我正在使用kinetic在动力学js的帮助下开发酒店楼层的视图。 但是因为我在canvas上得到了彼此重叠的图像。 帮助我消除canvas中图像的重叠。 这是我的代码： // get a reference to the house icon in the toolbar // hide the icon until its image has loaded var $house=$(“#house”); $house.hide(); // get the offset position of the kinetic container var $stageContainer=$(“#container”); var stageOffset=$stageContainer.offset(); var offsetX=stageOffset.left; var offsetY=stageOffset.top; // create the Kinetic.Stage and layer var stage = new Kinetic.Stage({ […]

如何从一个canvas复制到其他canvas

这是jsfiddle 我有这个作为我的源canvas HTML Source Canvas Destination Canvas JavaScript的 var sourceImage, ctx, sourceCanvas, destinationCanvas; //get the canvases sourceCanvas = document.getElementById(‘source’); destinationCanvas = document.getElementById(‘destination’); //draw the source image to the source canvas ctx = sourceCanvas.getContext(‘2d’); function start() { ctx.drawImage(img1, 0, 0); ctx.globalCompositeOperation = “source-atop”; var pattern = ctx.createPattern(img, ‘repeat’); ctx.rect(0, 0, sourceCanvas.width, sourceCanvas.height); ctx.fillStyle = pattern; ctx.fill(); […]

如何在canvas上画线

我想以如下方式在canvas上的圆圈内绘制一些线条。 我不知道如何绘制如下所示的线条。 但我有基本知识在canvas上绘制线条和弧线。 如何进行？