标签: html5-canvas
获取画布上下文的最后一个点的坐标
我想用CanvasRenderingContext2D.prototype创建一个arrowTo函数.要做到这一点,我需要得到最后一点的坐标.例如
//...
var ctx = someCanvas.getContext('2d');
ctx.moveTo(10,40);
//the coordinates of the last point are now (10,40)
ctx.lineTo(50,50);
//and now it's (50,50)
//...
我怎样才能找回它们？
推荐指数
解决办法
查看次数
nodejs - 如何将文件中的图像数据添加到画布中
以下代码应该读取图像文件,然后在Canvas模块的帮助下将文件数据添加到画布中.
当我运行此代码时,我收到错误消息图像未定义.我试图从我简单导入的模块初始化的图像对象是什么？
var http = require('http'), fs = require('fs'),
Canvas = require('canvas');
http.createServer(function (req, res) {
fs.readFile(__dirname + '/image.jpg', function(err, data) {
if (err) throw err;
img = new Image();
img.src = data;
ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4);
res.write('<html><body>');
res.write('<img src="' + canvas.toDataURL() + '" />');
res.write('</body></html>');
res.end();
});
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
推荐指数
解决办法
查看次数
如何将多个画布保存到一个图像中
我想使用asp.net将多个画布保存到一个图像中.我试着用两幅画布,但它没有保存.
帆布:
<div style="position:relative; width:456px; padding:0px; margin:0px;">
<canvas id="boardcanvas" width="456" height="480" style="position: absolute; left: 0; top: -220px; z-index: 0;"></canvas>
<canvas id="layer2" width="456" height="480" style="position: absolute;left: 0; top:-220px; z-index: 1;"></canvas>
</div>
<input type="button" id="btnSave" style="width:150px ; text-align:center;height:30px" name="btnSave" value="Save as Image!" />
jQuery的:
<script type="text/javascript">
// Send the canvas image to the server.
$(function () {
$("#btnSave").click(function () {
can1 = document.getElementById("broadcanvas");
ctx1 = can1.getContext("2d");
var coll = document.getElementById("layer2");
ctx1.drawImage(coll, 0, 0);
var image = can1.toDataURL("image/png");
alert(image);
image = image.replace('data:image/png;base64,', ''); …推荐指数
解决办法
查看次数
在图像上叠加HTML5画布
我希望有一个从我的数据库上传的图像,在它上面,相同位置的完全相同的大小是HTML5画布.
我发现大多数解决方案我一直在使用JQuery/JavaScript,但是我想要一个类似的解决方案,如果可能只使用CSS3,因为图像是从数据库输出的,页面上可以有多个图像,每个图像都会有画布.
我怎样才能做到这一点？
推荐指数
解决办法
查看次数
如何在javascript中获取HTML5 Canvas.todataurl文件大小？
var data_url = canvas.toDataURL("image/png");
var img = $("#img").attr("src",data_url);
什么是kb 的img文件大小？
推荐指数
解决办法
查看次数
HTML5画布到PDF
我正在使用HTML5并使用canvas作为设计工具.但是,我想将我的画布保存在一个默认为image/png的jpeg文件中,我想在PDF中显示画布的预览.
推荐指数
解决办法
查看次数
如何使用canvas imageData停止alpha-premultiplication？
有没有办法阻止画布数据的alpha通道的预乘或解决方法？
我想生成一个图像(在这种情况下是一些随机的rgba值)并将画布保存为图像.
在第二步中,我想使用imageData将原始图像与生成的图像进行比较,但是由于生成的图像中我的rgba像素的alpha通道的预乘,这不起作用.
function drawImage(ctx) {
var img = ctx.createImageData(canvas.width,canvas.height);
for (var i=img.data.length;i-=4;) {
img.data[i] = Math.floor(Math.random() * 255);
img.data[i+1] = Math.floor(Math.random() * 255);
img.data[i+2] = Math.floor(Math.random() * 255);
img.data[i+3] = Math.floor(Math.random() * 255);
}
ctx.putImageData(img, 0, 0);
// our image data we just set
console.log(img.data);
// the image data we just placed onto the canvas
console.log(ctx.getImageData(0,0,canvas.width, canvas.height).data);
}
在控制台中,您将找到两个console.log输出.第一个在预乘之前,第二个在预乘之后.这两个输出是不同的,一些值偏离3或更多.这仅在涉及部分透明度时发生(将alpha设置为255以外的任何值).
有没有办法获得相同的输出？关于这个问题的任何想法？任何想法如何创建像这个问题的解决方法？
先感谢您!
推荐指数
解决办法
查看次数
画布静态高度Chartjs
我使用chart.js 2.3.0绘制图形.我想使图形的高度静态(固定例如200px),但也想将宽度设置为100%.我见过的一个解决方案是:
responsive: false
在图表选项中.但这样做之后,宽度也会降低.有没有最好的办法呢？
静态高度和100%宽度.
推荐指数
解决办法
查看次数
在另一个画布中添加画布:obj.setCoords不是一个函数(fabric js)
开始使用fabric.js并尝试在另一个画布中添加画布,以便顶部画布保持不变,我将向内部画布添加对象.
以下是将画布添加到另一个画布的片段.
canvas = new fabric.Canvas('artcanvas');
innerCanvas = new fabric.Canvas("innerCanvas");
canvas.add(innerCanvas);
我的HTML看起来像这样
<canvas id="artcanvas" width="500" height="500"></canvas>
<canvas id="innerCanvas" width="200" height="200" ></canvas>
一旦成功添加这些,我将要做的是,将坐标添加到内部画布,以便它看起来像最终用户的另一个.
但是,尝试过的代码遇到了以下错误
Uncaught TypeError: obj.setCoords is not a function
at klass._onObjectAdded (fabric.js:6894)
at klass.add (fabric.js:231)
at main.js:60
at fabric.js:19435
at HTMLImageElement.fabric.util.loadImage.img.onload (fabric.js:754)
_onObjectAdded @ fabric.js:6894
add @ fabric.js:231
(anonymous) @ main.js:60
(anonymous) @ fabric.js:19435
fabric.util.loadImage.img.onload @ fabric.js:754
查看错误消息,只是转到错误行,这是我在chrome控制台中找到的
有人能指出我的代码中的错误吗？
推荐指数
解决办法
查看次数
查找在HTML 5画布上绘制的不规则形状的最大高度 - 宽度
我最近一直在做一些图像处理,我正在寻找一个javascript解决方案来确定完全在非常规形状内的最长线段.总而言之,线段应该是接触形状的最长线段,而不是重叠或移动到形状之外.
以下是我遵循的步骤
步骤1:
第2步:
第3步:
如步骤3所示,蓝线表示最大长度.它完美地确定了常规形状的长度,但是在形状不规则的情况下,它不起作用(也是在3点的情况下).
为了首先计算长度我已经取得了点(这是画布向下事件的鼠标坐标).
以下是Canvas的片段:
function getXY(e) {
var el = document.getElementById('canvas');
var rect = el.getBoundingClientRect();
/* console.log("widht "+$("#canvas").width());
console.log("heihgt "+$("#canvas").height());
console.log("X "+Math.round(e.clientX - rect.left));
console.log("y "+Math.round(e.clientY - rect.top));*/
return {
x: Math.round(e.clientX - rect.left),
y: Math.round(e.clientY - rect.top)
}
}
$('#canvas').mousedown(function(e) {
var can = document.getElementById("canvas");
var ctx = can.getContext('2d');
if (condition == 1) {
if (e.which == 1) {
//store the points on mousedown
var poss = getXY(e);
i = i + 1; …推荐指数
解决办法
查看次数