标签: html5-canvas

在尝试复合操作和在画布上绘制图像后,我现在正在尝试删除图像和合成.我该怎么做呢？

我需要清除画布以重绘其他图像; 这可以持续一段时间所以我不认为每次绘制一个新的矩形将是最有效的选择.

什么是动态创建元素并能够移动它们的最佳方法？例如,假设我想创建一个矩形,圆形和多边形,然后选择这些对象并移动它们.

我知道HTML5提供了三个可以实现这一目标的元素:svg,canvas和div.对于我想要做的事情,哪一个元素将提供最佳性能？

为了比较这些方法,我考虑创建三个视觉上相同的网页,每个网页都有页眉,页脚,小部件和文本内容.第一页中的小部件将完全使用canvas元素创建,第二个完全使用svg元素创建,第三个使用plain div元素HTML和CSS创建.

如何自动缩放HTML5 <canvas>元素以适合页面？

例如,我可以<div>通过将height和width属性设置为100%来进行缩放,但是<canvas>不会缩放,是吗？

我正在进行一个生成艺术项目,我希望允许用户从算法中保存生成的图像.一般的想法是:

• 使用生成算法在HTML5 Canvas上创建图像
• 图像完成后,允许用户将画布作为图像文件保存到服务器
• 允许用户下载图像或将其添加到使用算法生成的图片库中.

但是,我坚持第二步.在谷歌的一些帮助下,我找到了这篇博文,这似乎正是我想要的:

这导致了JavaScript代码:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/upload");
  ajax.send("imgData=" + canvasData);
}

和相应的PHP(testSave.php):

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $unencodedData = base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

但这似乎根本没有做任何事情.

更多谷歌搜索出现了这篇基于上一个教程的博客文章.差别不大,但也许值得一试:

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, …

我想要一个有一个居中单词的网页.

我想用动画绘制这个单词,这样页面就会以与我们相同的方式"写出"单词,即它从一个点开始,随着时间的推移绘制直线和曲线,使得最终结果是一个字形.

我不在乎这是用<canvas>DOM还是DOM 完成的,我不关心它是用JavaScript还是CSS完成的.没有jQuery会很好,但不是必需的.

我怎样才能做到这一点？我没有运气就进行了详尽的搜索.

我正在使用Nihilogic的"Canvas2Image"JavaScript工具将画布图转换为PNG图像.我现在需要的是使用PHP将这个工具生成的base64字符串转换为服务器上的实际PNG文件.

简而言之,我目前正在做的是使用Canvas2Image在客户端生成文件,然后检索base64编码的数据并使用AJAX将其发送到服务器:

// Generate the image file
var image = Canvas2Image.saveAsPNG(canvas, true);   

image.id = "canvasimage";
canvas.parentNode.replaceChild(image, canvas);

var url = 'hidden.php',
data = $('#canvasimage').attr('src');

$.ajax({ 
    type: "POST", 
    url: url,
    dataType: 'text',
    data: {
        base64data : data
    }
});

此时,"hidden.php"收到一个看起来像数据的数据块:image/png; base64,iVBORw0KGgoAAAANSUhEUgAABE ...

从现在开始,我非常难过.从我读过的内容来看,我认为我应该使用PHP的imagecreatefromstring函数,但我不确定如何从base64编码的字符串中实际创建一个实际的PNG图像并将其存储在我的服务器上.请帮助!

我想将我的画布保存为img.我有这个功能:

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

它给了我错误:

Uncaught SecurityError:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布.

我该怎么办？

我使用html5 canvas元素在浏览器中调整图像大小.事实证明,质量非常低.我发现:在缩放<canvas>时禁用插值,但它无助于提高质量.

下面是我的css和js代码,以及用Photoshop调整并在画布API中缩放的图像.

在浏览器中缩放图像时,我需要做些什么才能获得最佳质量？

注意:我想将大图像缩小到一个小图像,修改画布中的颜色并将结果从画布发送到服务器.

CSS:

canvas, img {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

JS:

var $img = $('<img>');
var $originalCanvas = $('<canvas>');
$img.load(function() {


   var originalContext = $originalCanvas[0].getContext('2d');   
   originalContext.imageSmoothingEnabled = false;
   originalContext.webkitImageSmoothingEnabled = false;
   originalContext.mozImageSmoothingEnabled = false;
   originalContext.drawImage(this, 0, 0, 379, 500);
});

使用photoshop调整图像大小:

图像在画布上调整大小:

编辑:

我尝试按照以下方案中提出的多个步骤进行缩减:

调整HTML5画布和 Html5画布中的图像大小drawImage:如何应用抗锯齿

这是我用过的功能:

function resizeCanvasImage(img, canvas, maxWidth, maxHeight) {
    var imgWidth = img.width, 
        imgHeight = img.height;

    var ratio = 1, ratio1 …

数码相机照片通常以JPEG格式保存,并带有EXIF"方向"标签.要正确显示,需要根据设置的方向旋转/镜像图像,但浏览器会忽略渲染图像的信息.即使在大型商业网络应用程序中,对EXIF方向的支持也可能不稳定1.相同的源代码还提供 了JPEG可以具有的8种不同方向的精彩摘要:

样本图像可在4处获得.

问题是如何在客户端旋转/镜像图像,以便正确显示并在必要时进一步处理？

有JS库可用于解析EXIF数据,包括orientation属性2.Flickr在解析大图像时注意到了可能的性能问题,需要使用Web工作者3.

控制台工具可以正确地重新定向图像5.解决问题的PHP脚本可在6处获得

我的代码在我的localhost上运行得很好,但是它在网站上没有运行.

我从控制台得到了这个错误.getImageData(x,y,1,1).data:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

我的部分代码:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

注意:我的图片网址(src)来自子网址网址