天道酬勤,学无止境

canvas

How to create and export svg to png/jpeg

问题 我有以下代码片段,例如 package main import ( "github.com/ajstarks/svgo" "os" _ "image" _ "fmt" ) func main(){ width := 512 height := 512 canvas := svg.New(os.Stdout) canvas.Start(width,height) canvas.Image(0,0,512,512,"src.jpg","0.50") canvas.End() } 我想将此代码创建的 svg 导出到 jpeg 或 png 或 svg 让我们说。 如何做到这一点我不明白。 我可以使用 imagemagick 或其他东西,但为此我需要 SVG 的东西。 请有人帮我解决这个问题。 回答1 package main import ( "image" "image/png" "os" "github.com/srwiley/oksvg" "github.com/srwiley/rasterx" ) func main() { w, h := 512, 512 in, err := os.Open("in.svg") if err != nil { panic(err) } defer in.Close() icon, _ := oksvg.ReadIconStream(in)

2022-07-11 09:58:20    分类:技术分享    canvas   go   imagemagick

Android - Set Image overlay with background color outside of bitmap using canvas

问题 我正在研究相机活动覆盖,我已经成功地在矩形之外创建了不透明的颜色(不透明的黑色)。 而且我还成功地在大矩形内创建了一个小矩形。 请看下图。 如您所见,小矩形上有蓝色背景。 问题是,我想在图像(位图)之外制作蓝色背景,而不是覆盖图像。 问题是,如果我用透明填充更改图像,蓝色背景将覆盖它。 如何使蓝色背景仅覆盖图像的外部? 我已经尝试从谷歌找到所有可能的答案,但我没有运气,也许我从错误的方法开始,需要建议。 这是我的代码 bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); Canvas osCanvas = new Canvas(bitmap); RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight()); Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setColor(getResources().getColor(R.color.opaque_black)); paint.setAlpha(99); osCanvas.drawRect(outerRectangle, paint); paint.setXfermode(new

2022-05-17 05:03:11    分类:技术分享    android   image   canvas   bitmap   android-camera

Fabric.js: Resize canvas and continue working

问题 我正在使用用户上传的 Fabric.js 操作图像。 这是应用程序的工作原理 上传的图像可以在整个画布(灰色区域)上移动和处理。 完成后,我只需要中间区域。 用户单击save ,目前我将绿色区域保存为图像,但我还需要将整个画布调整为仅绿色区域。 我尝试更改整个画布的width和height ,然后redrawAll() ,但画布位于左下角,只有一小部分工作区域可见,其余部分为空灰色。 是否可以拍摄绿色区域的快照并继续在画布上工作? 谢谢 回答1 您应该广泛使用 viewportTransform。 让我们举个例子:你有一个 1000x1000 的画布元素,你想在一个 500x500 像素的区域上工作。 您使用绿色图像或 500x500 的绿色矩形作为背景图像设置绿色区域,左上角为 0,0。 然后您将织物画布的 viewportTransform 设置为 [1, 0, 0, 1, 250, 250] 这将使您的画布平移到该灰色边框的右下角。 何时保存,您有 2 个选择: 1) 设置一个 viewportTransform,让您覆盖原始画布的所有内容并导出到 dataurl 2)您创建一个 500x500px 的屏幕外画布,将对象移到那里,而不触摸新的画布缩放和平移(视口变换)并将该画布导出到 dataUrl 该片段有一些示例,但您需要完全了解如何使用和检查

2022-05-17 03:44:03    分类:技术分享    javascript   canvas   fabricjs

canvas drawImage from multiple canvas to one canvas slow in chrome

问题 我想在画布上用 +10k 个对象绘制一张大地图。 这些对象基本上是许多圆圈(可能多达 10 种不同的颜色,大小都相同)和几个单独形状的多边形。 我还需要平移和缩放地图。 我现在只专注于画圆圈,并根据此处提出的建议尝试了许多不同的实现。 将一个全分辨率的屏幕外画布作为缓冲区并使用drawImage裁剪当前视口并将其绘制在我的屏幕画布上,效果很好,直到我达到 16M 像素的 iPhone 尺寸限制。 我决定拆分缓冲区画布并为与视口相交的每个缓冲区画布调用drawImage (参见图形)。 这在 safari、firefox 上运行得很好,在 iPhone 上也非常快,但在 Chrome 中真的很慢。 这是在动画帧中调用的代码(但只有在某些情况发生变化的情况下),这会导致滞后。 console.time("copy"); buffers = this.getBuffersInViewport(vp); for(var i = 0; i < buffers.length; i++){ var buffer = buffers[i]; var sx = Math.round(Math.max(0,vp.minX - buffer.minX)); var sy = Math.round(Math.max(0,vp.minY - buffer.minY)); var sWidth =

2022-05-16 18:57:03    分类:技术分享    javascript   html   canvas

Creating a canvas in JavaScript based on variables (with p5.js)

问题 我想根据变量绘制一个简单的画布。 它是这样工作的: function setup() { createCanvas(600, 600); background(50); } 为什么这不起作用? (一个小画布,绝对不会显示 600x600): var height = 600; var width = 600; function setup() { createCanvas(height, width); background(50) } 我很感激任何帮助! 回答1 它不起作用,因为height和width是内置的 p5 变量名称。 尝试将它们重命名为其他名称。 var a = 600; var b = 600; function setup() { createCanvas(a, b); background(50) } 如果您希望使画布与窗口大小相同,则应使用windowWidth和windowHeight 。 function setup() { createCanvas(windowWidth, windowHeight); } 要在设置后调整画布大小,您应该执行以下操作: var c; function setup() { c = createCanvas(windowWidth-20, windowHeight-20); } function draw() {

2022-05-16 00:10:28    分类:技术分享    javascript   canvas   p5.js

Chart.js aspect ratio / forced height

问题 我正在尝试使用 chart.js 创建缩略图,该缩略图将链接到具有完整图表的页面。 链接页面上的完整图表看起来不错,但对于缩略图,我无法正确调整大小。 画布覆盖了正确的区域,但图表没有垂直填充它。 var data = { labels: ['','','','','','','','','',''], datasets: [{ data:[22,25,23,24,25,22,25,23,24,25], backgroundColor: "rgba(54, 255, 170, 0.4)", borderColor: "rgba(54, 255, 170, 1)", orderWidth: 1, }] }; var options = { tooltips: false, legend: { display:false }, scales: { yAxes: [{ display:false, ticks: { beginAtZero:true } }], xAxes: [{ gridLines: { color: "rgba(0, 0, 0, 0)", } }] } }; new Chart($("#chart-"+this.model.id), { type: 'bar', data: data, options: options })

2022-05-15 12:37:04    分类:技术分享    javascript   canvas   chart.js   height

Fabric JS Select Object by ID Programmatically

问题 在 Fabric JS 中,我需要通过给定的对象名称/ID“Circle”选择对象 var onCircle = function () { canvas.add(new fabric.Circle({ id: 'Circle', radius: 30, fill: '#f55', top: 150, left: 150 })); } 我也知道对象可以通过 ItemID 进行选择: var SelectObject = function (ObjectName) { canvas.setActiveObject(canvas.item(0)); } 我需要类似的东西: var SelectObject = function (ObjectName) { canvas.setActiveObject('my object name'); } 回答1 var SelectObject = function (ObjectName) { canvas.getObjects().forEach(function(o) { if(o.id === ObjectName) { canvas.setActiveObject(o); } }) }

2022-05-15 10:08:14    分类:技术分享    javascript   canvas   fabricjs

React -- Canvas Won't Draw Image

问题 import React, { Component, PropTypes } from 'react'; export default class CanvasCreator extends Component { componentDidMount() { this.updateCanvas(); } updateCanvas() { const ctx = this.refs.canvas.getContext('2d'); var imageObj1 = new Image(); imageObj1.src = 'https://s-media-cache-ak0.pinimg.com/236x/d7/b3/cf/d7b3cfe04c2dc44400547ea6ef94ba35.jpg' ctx.drawImage(imageObj1,0,0); } render() { return ( <canvas ref="canvas" width={300} height={300}> </canvas> ); } }; 回答1 updateCanvas() { const ctx = this.refs.canvas.getContext('2d'); var imageObj1 = new Image(); imageObj1.src = 'https://s

2022-05-15 07:50:30    分类:技术分享    javascript   reactjs   meteor   canvas

Canvas not sizing to window inner width & height

问题 根据 Javascript 的 window.innerWidth 和 window.innerHeight 属性的文档,两者都是在没有工具栏和滚动条的情况下计算的。 但是,当我尝试将 div 元素和 canvas 元素设置为与窗口相同的大小时,这两个元素的宽度和高度属性都有多余的部分。 我该如何解决这个问题? 笔 HTML <body> <div id="gameScreen"> <canvas id="basemap"></canvas> </div> </body> CSS html, body{ margin: 0; padding: 0; } #gameScreen{ margin: 0; padding: 0; border: 1px solid black; } #basemap{ margin: 0; padding: 0; background-color: red; } JS function sizePage(){ var gameScreen = document.getElementById("gameScreen"); var basemap = document.getElementById("basemap"); var canvasWidth = window.innerWidth; var cnavasHeight = window

2022-05-15 05:36:12    分类:技术分享    javascript   html   css   canvas

Canvas using Uint32Array: Wrong colors are being rendered

问题 我目前正在创建一个 JS 画布,我想在其中显示一个不同颜色的框。 我使用 uint32 来提高速度,但我的颜色永远无法正确显示! 我主要在这里查看了示例:https://stackoverflow.com/a/19502117 有人在评论中说: (小I或者JS会报错)。 OP 提示:Uint32 的颜色也可以简单地使用十六进制给出 - 无需进行移位:0xff00000 = 黑色 + alpha 设置为 255; 对于 little-endian/LSB CPU,在 big-endian/MSB CPU 上相反。” 我确定我的笔记本电脑是小端的。 我在这里有我的问题的演示:http://jsfiddle.net/GhwUC/357/ var canvas = document.getElementById('canvas'); var canvasWidth = canvas.width; var canvasHeight = canvas.height; var ctx = canvas.getContext('2d'); var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight); var buf = new ArrayBuffer(imageData.data.length); var buf8 =

2022-05-14 21:46:09    分类:技术分享    javascript   html   canvas   32-bit