canvas

CanvasRenderingContext2D putImageData oddity

由 為{幸葍}努か 提交于 2020-01-06 06:43:06
问题 So i'm adding some image manipulation functions to one of our company projects. Part of the feature is an image cropper with the desire to 'auto-detect' the cropped image to some degree. If our guess is bad they can just drag & drop the cropper points, but most images people should be able to be auto-cropped. My issue is when i'm putting the data back into the canvas indexes that work don't seem make any sense to me based on the documentation. I'm trying to take the rect I find and convert he

Typescript - Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

由 落花浮王杯 提交于 2020-01-06 06:13:27
问题 I am building an Ionic App and I am getting this error when I try to convert to base64 an image from an URL. Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. My code is the following: public getBase64Image(imgUrl: string): Promise<string> { if (!imgUrl.includes("http")) { return; } return new Promise<string>(resolve => { let img = new Image(); img.src = imgUrl; img.crossOrigin = "anonymous" img.onload = (() => { let canvas =

Typescript - Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

由 倖福魔咒の 提交于 2020-01-06 06:13:05
问题 I am building an Ionic App and I am getting this error when I try to convert to base64 an image from an URL. Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. My code is the following: public getBase64Image(imgUrl: string): Promise<string> { if (!imgUrl.includes("http")) { return; } return new Promise<string>(resolve => { let img = new Image(); img.src = imgUrl; img.crossOrigin = "anonymous" img.onload = (() => { let canvas =

canvas animation javascript functions and global variables

由 非 Y 不嫁゛ 提交于 2020-01-06 05:27:07
问题 Please, may someone help me! I am new in javascript. I want to make canvas animation using javascript. But I have the following error SCRIPT5007: Unable to get value of the property 'getContext': object is null or undefined drawing_script.js, line 31 character 5 Here is the code. Javascript: // JScript source code /* Because the canvas can hold only one context at time, we'll create two canvas. Each one with its context. One canvas for the circle, and another one for the square. */ var

03 canvas帧动画封装案例

由 我只是一个虾纸丫 提交于 2020-01-06 04:57:28
sprite.js /** * Created by suxiaoxia on 2017/7/15. */ function sprite(option) { this._init(option); } sprite.prototype =　{ /*初始化*/ _init:function (option) { this.x = option.x || 0; this.y = option.y || 0; this.w = option.w || 40; this.h = option.h || 65; this.fps = option.fps || 10; this.originW = option.originW || 40; this.originH = option.originH || 65; this._dirIndex = 0; this._imgSrc = option.imgSrc || ''; }, render:function (ctx) { var img = new Image(); img.src = this._imgSrc; var self = this; img.onload = function () { var frameIndex = 0; setInterval(function () { ctx.clearRect(0,0,ctx

How to crop a selected rectangle using based on mouse clicks

由 て烟熏妆下的殇ゞ 提交于 2020-01-06 04:00:15
问题 I have drawn an image on the canvas. I want the user to click on the canvas to crop a portion of the image. How can I do this? 回答1: Here's an outline to get you started: Draw the image onto the canvas var canvas=document.getElementById('myCanvas'); canvas.drawImage(yourImageObject,0,0); Listen for mousedown events. canvas.onmousedown=function(e){handleMouseDown(e);}; Have the user click in the top-left [x0,y0] and bottom-right [x1,y1] corners where they want to crop and record those 2 mouse

Using Rect with touch coordinates

由 五迷三道 提交于 2020-01-06 03:46:44
问题 In my app whenever I place my second finger on the Screen. I should be able to show the center of the view shown in this post or below image at the point of touch of second finger. I am using the code shown below. The problem I face is the center of the mainarea is not at the second finger touch. public OnTouchListener mTouchlistener = new OnTouchListener() { @TargetApi(Build.VERSION_CODES.M) @Override public boolean onTouch(View v, MotionEvent event) { int pointerIndex = event.getActionIndex

JS drawing a line from the edge of a circle to another circle edge

由 夙愿已清 提交于 2020-01-06 03:19:10
问题 I'm trying to draw a line from the edges of the two circles in HTML5 canvas. So, I know the coordinates of the centers of two circles and their radius. Circles drawn randomly. Line should move from the edge of one circle to the other. Please help! P.S. Sorry for my english :) UPDATE: I'm trying this, but how to know angle? from_line_x = circle1.x + circle1.radius * Math.cos(Math.PI * angle); from_line_y = circle1.y + cirlce1.radius * Math.sin(Math.PI * angle); to_line_x = circle2.x - circle2

Finding non transparent filled areas in images on javascript canvas

由 妖精的绣舞 提交于 2020-01-06 02:42:25
问题 I've an image with some filled circles, rectangles etc. I want to find x1,x2, y1, y2 areas of filled areas. Javascript Method to detect area of a PNG that is not transparent Accepted answers works fine but i need to find each areas separately. As in the image below, i need thee x1, x2, y1, y2 positions. Do you have any ideas? 回答1: Here's an outline to get you started: Use context.getImageData to get the pixel data from the canvas, Scan the pixel data for the first non-transparent pixel, Use

Pause, resume and restart Canvas animations with JS

由 ぐ巨炮叔叔 提交于 2020-01-06 02:42:05
问题 Is there anyway to pause, resume and restart my canvas arc animation progress bar? I've added the click functions in place but no idea where to start in order to achieve what I'm after. I've added a working fiddle here: http://jsfiddle.net/4txsqeoh/2/ I would like to make separate functions so can call when needed from the click events etc. Update I've added calls in the click events and empty functions but not sure where to go from here, I'm new to JS. JS: function init() { var c = document
订阅 canvas