标签: html5-canvas
上传前调整图像大小 - 将画布转换为File对象
这是我现在用来使用HTML5 File API上传多个图像的代码片段:
/**
* @param {FileList} files
*/
upload: function(files){
nfiles = files.length;
for (var i = 0; i < nfiles; i++) {
/** @var file File **/
var file = files[i];
var xhr = new XMLHttpRequest();
xhr.open("POST", settings.post_upload, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.upload.filenumb = i;
xhr.filenumb = i;
xhr.upload.filename = file.name;
var nef = new FormData();
nef.append("folder", settings.folder);
nef.append("file_element", settings.file_elem);
nef.append("udata", settings.user_data);
nef.append(settings.file_elem, file);
xhr.send(nef);
}
}
我想在使用canvas对象上传之前调整图像大小,但没有相关经验,我不知道如何使用技术更新代码,例如下面描述的那些:HTML5在上传之前预先调整图像大小
canvas.toDataURL("image/png");将返回一个编码的字符串.但是我需要发布这个File对象.
编辑
如何(合理地)为大多数现代浏览器编写跨浏览器功能,以便在上传之前调整文件大小,处理具有透明度的jpg,png和gif: …
推荐指数
解决办法
查看次数
在浏览器中编辑*现有*PDF
我有一个Web应用程序,当前从服务器获取PDF的base64表示.我可以使用Mozilla的pdf.js在a上显示它,<canvas>并通过下拉菜单在页面之间切换.
根据我能找到的一切,Mozilla的pdf.js可以修改PDF吗？,用pdf.js编辑PDF是不可能的.
我找到了jsPDF,虽然我可以拿画布并.toDataURL()为每个页面做一个用它来构建一个新的PDF文档,但有两个问题:
- 新生成的PDF将只是每页上的一系列图像,因此原始PDF中的任何文本都将在我完成之后成为图像.
- 我使用jsPDF生成一个新的PDF,然后将它的base64发送回pdf.js以在画布上显示它.在这些步骤之间发生了一些事情,其中页面的图像缩放不正确,因此每次新的PDF更改后,每个页面占据画布的大约3/4.我一直无法保持相同的尺寸/规模.
jsPDF看起来没有办法加载现有的PDF,它只会创建新的PDF.pdfmake和PDFKit看起来也只是创建新的PDF文件.
所以我的问题:
是否有任何内容可以同时查看pdf(来自base64)并对其进行更改？理想情况下,我会关注画布的更改,然后将更改绘制到pdf页面上.完成后,将其导出到base64字符串以发送回服务器.
推荐指数
解决办法
查看次数
用画布缩放
在测试应用程序中,我有一个带有简单矩形的画布.方法绘制每100ms调用一次.
正如您从代码中看到的那样,我正在使用鼠标滚轮来扩展所有内容.现在发生的是,一切都是缩放的,但是当矩形是10px,10px并且我的鼠标正好在它上面时,矩形在缩放后不再在鼠标下面.(这当然是正确的,因为所有单位都按比例扩大.
但我想要的是,鼠标位置是谷歌地图中的"缩放动作的中心",因此缩放之前鼠标下的内容也在鼠标之后.我做了一些翻译尝试,但我想不通,怎么做.
提前致谢.
这是我的代码:
<script type="text/javascript">
var scroll = 0;
var scale = 1.0;
/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
scroll = delta;
if(scroll > 0)
{
scale += 0.2;
}
if(scroll < 0)
{
scale -= 0.2;
}
}
/** Event handler for mouse wheel event.
*/
function wheel(event){
var delta = 0;
if (!event) …推荐指数
解决办法
查看次数
如何在nodejs中获取视频的快照？
我正在尝试编写一个nodejs服务器,它将花费一些时间输入(可能是url路径的一部分),然后在那个时间索引处提供一个视频帧的静止图像作为jpeg图片.
我可以在普通的Javascript中轻松地做到这一点,但是我无法在nodejs中看到这样做的方法.我知道我可能需要使用像canvas-canvas这样的canvas插件来创建快照.
欢迎任何想法.
以下是我目前在Javascript中的操作方法:
myjavascript.js
function capture(video, scaleFactor) {
if(scaleFactor == null){
scaleFactor = 1;
}
var w = video.videoWidth * scaleFactor;
var h = video.videoHeight * scaleFactor;
stdout("<br/> w: "+ w+ "<br/> h: "+ h);
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
return canvas;
}
function shoot(){
var video = document.getElementById("videoTag");
var output = document.getElementById("output");
var canvas = capture(video, 1);
output.innerHTML = '';
output.appendChild(canvas);
}
的index.html
<html> …推荐指数
解决办法
查看次数
HTML5 Canvas图像缩放问题
我试图在HTML5画布中制作像素艺术主题游戏,作为其中的一部分,我拍摄10x20左右的大小图像,并使用以下代码将它们绘制到画布上:
ctx.drawImage(image, 20, 20, 100, 200);
然而,画布使用双三次图像缩放,因此像素艺术图像在2x及以上时看起来很糟糕.有没有办法强制画布使用最近邻居缩放或可能使用自定义方法来缩放图像？如果不是这意味着图像必须预先在像Paint.net这样的东西上缩放？
推荐指数
解决办法
查看次数
为什么我不能在HTML5画布中画出两行不同的颜色？
我正在尝试使用HTML5画布在绿线左侧绘制一条红线.这是我的javascript:
var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;
var canvasContext = canvas.getContext('2d');
canvasContext.beginPath();
// Draw the red line.
canvasContext.strokeStyle = '#f00';
canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.stroke();
// Draw the green line.
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#0f0';
canvasContext.lineTo(50, 100);
canvasContext.stroke();
document.body.appendChild(canvas);?
但是,在谷歌浏览器中,我在浅绿色线的左侧出现深绿色线条.为什么？我两次叫中风吧？因此,为什么我的第一次中风影响我的第二次？
这是一个说明我的意思的JSFiddle.
推荐指数
解决办法
查看次数
向控件添加自定义删除(后退,前进)按钮
我想知道是否有一种简单的方法来添加删除,带到前面,将功能带回到现有的fabric.js对象控件中.
目前我只能点击删除对象的按钮,带到前面等.
我正在寻找能够按下对象上的X(在右上角)并删除对象的解决方案.
我想这将与覆盖,包装或子类化现有控件对象有关.
也许我已经监督了一些事情并且有一个简单的解决方案？请不要Div Wrapper.
推荐指数
解决办法
查看次数
为什么不支持context2d.backingStorePixelRatio？
根据Paul Lewis的文章,高DPI画布:你需要考虑context.backingStorePixelRatio解决模糊问题.
如果不推荐使用此属性,飞镖会处理高清设备上的模糊问题吗？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
HTML 5画布中的一手拉圆模拟
在下面的代码创建使用jQuery在HTML 5画布的圆:
码:
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
DrawCircle(75, 75, 20);
//draw a circle
function DrawCircle(x, y, radius)
{
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.fillStyle = 'transparent';
ctx.lineWidth = 2;
ctx.strokeStyle = '#003300';
ctx.stroke();
ctx.closePath();
ctx.fill();
}
我正在尝试模拟以下任何类型的圈子:
我已经研究并发现了这篇文章,但无法应用它.
我希望绘制圆而不仅仅是出现.
有一个更好的方法吗？我感觉会有很多数学问题:)
PS我喜欢PaperJs的简单性,也许这是使用简化路径的最简单方法？
推荐指数
解决办法
查看次数
标签 统计
html5-canvas ×10
canvas ×4
html5 ×4
javascript ×4
bicubic ×1
dart ×1
fabricjs ×1
file-upload ×1
html5-video ×1
jquery ×1
node.js ×1
pdf ×1
pdf.js ×1