草庐IT

convert-canvas-image

全部标签

javascript - CSS 和 JQuery : spaces inside image name break code of url()

我有一个页面,当鼠标悬停在缩略图上时,该页面应该显示图像的放大版本。我有一个带有ID的“div”,JQuery代码如下:$(document).ready(function(){$('img').hover(function(){varsrc=$("#im"+this.id).attr("src");$('#viewlarge').css('backgroundImage','url('+src+')');returnfalse;});});我使用的图像是由Ruby脚本生成的,该脚本“生成”具有相似但不同ID的图像。但是,有时上传的照片内部有“空格”。我的开发人员工具告诉我背景图片设置

javascript - Threejs Canvas 背景黑色

用threejs的基本场景试了下,不明白canvas背景为什么全黑MyfirstThree.jsappbody{margin:0;}canvas{width:100%;height:100%;background-color:white;}varscene=newTHREE.Scene();varcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);varrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.in

JavaScript:如何强制 Image() 不使用浏览器缓存?

如果我在浏览器中手动加载nextimgURL,每次重新加载时它都会提供一张新图片。但是这段代码在draw()的每次迭代中显示相同的图像。如何强制不缓存myimg?functiondraw(){varcanvas=document.getElementById('canv');varctx=canvas.getContext('2d');varrx;varry;vari;myimg=newImage();myimg.src='http://ohm:8080/cgi-bin/nextimg'rx=Math.floor(Math.random()*100)*10ry=Math.floor(M

javascript - 非常简单 : requiring images in webpack and Angular 2

我在Angular2webpack应用程序中需要图像时遇到了一些问题。我已经尝试了三四个图像加载器,但我似乎无法正确配置它们并且HTML中的结果不正确。例如,目前我有:包含此图像的文件是模板的一部分,需要这样:@Component({selector:'appstore-app',directives:[...ROUTER_DIRECTIVES],styles:[require('../sass/appstore.scss').toString()],template:require('./app.component.html')})这会导致浏览器出错:GET:http://local

javascript - Html2Canvas 泰语问题

运行此代码,然后“保存”您将得到不同的图像。有解决这个问题的方法吗?代码示例$(document).on("click","#save",function(){html2canvas($("body"),{onrendered:function(canvas){$("#result_here").append(canvas);vardata=newFormData();data.append("data","the_text_you_want_to_save");varxhr=(window.XMLHttpRequest)?newXMLHttpRequest():newactiveXO

javascript - 拥有一个大 Canvas 还是最多 100 个动态生成的小 Canvas 更好?

我正在开发移动网络骰子模拟器。初始原型(prototype)在这里:http://dicewalla.com我目前有一个大Canvas,我可以在其中绘制所有骰子。我计划以更MVC且更易于更新的方式重新编写代码。我认为为每个骰子对象生成一个小Canvas比在大Canvas上绘制所有骰子并不断更新大Canvas更容易。我的问题是,让浏览器创建大量小Canvas与一个大Canvas相比,是否会对性能造成不良影响。很难在本地进行测试,我希望这里有人知道最佳做法是什么。 最佳答案 多个Canvas通常可以实现更好的性能,因为您可以有选择地重新

javascript - 使用 JsPDF 将 Canvas 转换为 Pdf

我正在尝试将canvas转换为pdf,但我得到的结果是干净的白色pdf这是代码,我无法弄清楚我错过了什么..functionHtmlToImage(){html2canvas(document.body,{onrendered:function(canvas){varimg=canvas.toDataURL("image/jpeg,1.0");varpdf=newjsPDF();pdf.addImage(img,'JPEG',0,0);pdf.output('datauri');}});} 最佳答案 试试这个:varpdf=newj

javascript - 饼图、条形图、线 : SVG/VML better than Canvas

我需要为“标准”图表选择一个库:饼图、折线图和条形图。根据我的阅读,在我看来最好的格式是SVG/VML,例如Highcharts。SVG正在成为所有主要浏览器的标准,现在IE9接受了它。它似乎比Canvas更容易重新缩放和导出。不过,我看到有几个图表库依赖于Canvas。我错过了什么吗?对于此类应用程序,是否有任何理由考虑使用Canvas而不是SVG? 最佳答案 您通常可以使用其中任何一种获得相同的结果。两者最终都为用户在屏幕上绘制像素。主要区别在于HTML5Canvas使您可以对结果进行像素级控制(读取和写入),而SVG是一种保留

javascript - WebGL VS Canvas 二维硬件加速

最近,我需要在Canvas上绘制许多图像。Canvas大小是800x600px,我有很多256x256px的图片(有些小)可以在上面画,这些小图会在Canvas上组成一个完整的图像。我有两种方法来实现这个。首先,如果我使用Canvas2D上下文,即context=canvas.getContext('2d'),那么我可以只使用context.drawimage()方法将每个图像放在Canvas的正确位置。另一种方式,我使用WebGL在Canvas上绘制这些图像。这样,对于每个小图像,我都需要绘制一个矩形。矩形的大小与这个小图像相同。此外,矩形位于Canvas的正确位置。然后我使用图像作

javascript - ChartJS Canvas 在 IE、Safari 和 Firefox 中不显示 rgba 颜色

我正在使用ChartJS来显示一些数据,但它没有在IE、Firefox和Safari中正确呈现Canvas元素。我的猜测是背景颜色属性缺少其他浏览器使用的任何前缀,因为它在Chrome中工作正常。还有其他人遇到过这个问题吗?Chrome:Firefox、Safari和IE:代码:window.onload=function(){varctx=document.getElementById("canvas");varmyChart=newChart(ctx,{type:'line',data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Ju