Tag: canvas

Pdf.js：使用base64文件源代替url来渲染pdf文件: 我正在尝试使用pdf.js来显示PDF格式的页面通常，使用url，我可以这样做： PDFJS.getDocument("http://www.server.com/file.pdf").then(function getPdfHelloWorld(pdf) { // // Fetch the first page // pdf.getPage(1).then(function getPageHelloWorld(page) { var scale = 1.5; var viewport = page.getViewport(scale); // // Prepare canvas using PDF page dimensions // var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // // Render PDF page into canvas context // […]

HTML5 Canvasresize（缩小）图像高质量？: 我使用html5 canvas元素来调整图片在我的浏览器。事实certificate，质量是非常低的。我发现这个：缩放一个<canvas>时禁用插值，但它无助于提高质量。下面是我的css和js代码以及用Photoshop调出的图像，并在canvasAPI中缩放。在浏览器中缩放图像时，为了获得最佳质量，我需要做些什么？注意：我想将一个较大的图像缩小到一个较小的图像，在canvas中修改颜色并将结果从canvas发送到服务器。 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：在canvas上调整的图像： […]

如何将图像添加到canvas: 我正在用HTML中的新canvas元素进行实验。我只是想添加一个图像的canvas，但它不工作的原因。我有以下代码： HTML <canvas id="viewport"></canvas> CSS canvas#viewport { border: 1px solid white; width: 900px; } JS var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'img/base.png'; context.drawImage(base_image, 100, 100); } 图像存在，我没有得到JavaScript错误。图像只是不显示。这一定是非常简单的事，我错过了…

你怎么能findHTMLcanvas上的文字的高度？: 该规范有一个context.measureText（文本）函数，将告诉你需要多less宽度来打印该文本，但我找不到一个方法来找出它有多高。我知道它是基于字体，但我不知道要将字体string转换为文本高度。

HTML5 Canvas旋转图像: jQuery('#carregar').click(function(){ var canvas = document.getElementById('canvas'); var image = document.getElementById('image'); var element = canvas.getContext("2d"); element.clearRect(0, 0, canvas.width, canvas.height); element.drawImage(image, 0, 0, 300, 300); }); jsfiddle.net/braziel/nWyDE/ 我有一个问题，旋转90度的权利或向左的图像。我在canvas上使用了一个图像，同一个画面将有几个canvas与该示例的canvas相同，但是我尽可能靠近该项目。我问，当我点击“向左旋转”和“向右旋转”时，如何将图像向左或向右旋转90°？我在互联网上尝试了几个代码，但都没有工作。

我可以closuresHTML <canvas>元素的抗锯齿function吗？: 我正在玩弄<canvas>元素，绘制线条等。我注意到，我的对angular线是antialiased。我更喜欢看看我在做什么 – 有没有办法把这个functionclosures？

将数据URL中的图像绘制到canvas上: 我如何在Canvas中打开图像？这是编码我正在使用 var strDataURI = oCanvas.toDataURL(); 输出是编码的基础64图像。我如何在canvas上绘制这个图像？我想使用strDataURI并创build图像？这是否可行？如果不是那么可能是什么可能是在图像加载在canvas上的解决scheme？

如何使用canvas.toDataURL（）将canvas保存为图像？: 我目前正在构build一个HTML5的Web应用程序/ Phonegap原生应用程序，我似乎无法弄清楚如何将canvas作为一个图像保存到canvas.toDataURL() 。有人能帮我吗？这是代码，它有什么问题？ //我的canvas被命名为“canvasSignature” JavaScript的： function putImage() { var canvas1 = document.getElementById("canvasSignature"); if (canvas1.getContext) { var ctx = canvas1.getContext("2d"); var myImage = canvas1.toDataURL("image/png"); } var imageElement = document.getElementById("MyPix"); imageElement.src = myImage; } HTML5： <div id="createPNGButton"> <button onclick="putImage()">Save as Image</button> </div>

如何使用JavaScript HTML5canvas通过N点绘制平滑曲线？: 对于绘图应用程序，我将鼠标移动坐标保存到一个数组，然后用lineTo绘制它们。结果线不平滑。我怎样才能在所有聚集的点之间产生一条曲线？我已经search了，但我只find了3个绘制线的函数：对于2个采样点，只需使用lineTo。对于3个采样点quadraticCurveTo，对于4个采样点，bezierCurveTo。（我试图在数组中每4个点绘制一个bezierCurveTo，但是这会导致每4个采样点扭曲，而不是连续的平滑曲线。）如何编写一个函数来绘制5个采样点以上的平滑曲线？

真正的鼠标在canvas上的位置: 我试图用鼠标在HTML5canvas上绘制，但是看起来效果不错的唯一方法是如果canvas位于位置0,0（左上angular），如果我更改canvas位置，出于某种原因它并不像它应该画的那样。这是我的代码。 function createImageOnCanvas(imageId){ document.getElementById("imgCanvas").style.display = "block"; document.getElementById("images").style.overflowY= "hidden"; var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d"); var img = new Image(300,300); img.src = document.getElementById(imageId).src; context.drawImage(img, (0),(0)); } function draw(e){ var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d"); posx = e.clientX; posy = e.clientY; context.fillStyle = "#000000"; context.fillRect (posx, posy, 4, 4); } HTML部分 <body> […]