canvas

javascript- unable to convert canvas to image data

由 自闭症网瘾萝莉.ら 提交于 2019-12-24 07:49:43
问题 guys! I'm trying to make a demo using which a user will be able to capture an image from the web camera enabled through his browser and this image will be saved in the backend by passing it to a PHP service using AJAX call. I'm able to capture as canvas but not being to convert it into image data. I'm getting canvas is undefined error Setup is pretty simple. HTML <video id="videoElement" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" style="display:none" ></canvas

Is there a max size for images being loaded onto canvas on iPhone?

由 时间秒杀一切 提交于 2019-12-24 07:40:35
问题 I am building a webapp game that has a scrolling background. The background is just a really tall image that is copied to the smaller canvas in slices to give the sensation of movement. The image file I started with was 6000px tall (my canvas is 640px tall). All desktop browsers and iPad2 (iOS 6) loaded the image file fine and the animation looks great. However, on iPhone 4S (iOS 5) - the background never loads at all! I solved the problem by just cutting the big background image down until

Unable to make a chunk from canvas

由 感情迁移 提交于 2019-12-24 07:40:07
问题 I want to have such an interaction with a map, that when a user selects some area on the map, an image is created from this area. I made a minimized and compiltely reproducible example in this fiddle. The most important part is this crop function: function crop(img, sx, sy, dw, dh) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = dw; canvas.height = dh; ctx.drawImage(img, sx, sy, dw, dh, 0, 0, dw, dh); return canvas.toDataURL("image/png"); }

How to animate tree in HTML5 canvas

由 こ雲淡風輕ζ 提交于 2019-12-24 07:17:10
问题 I drew this tree in canvas and now i want to animate it and make it look like it is growing. I am a beginner with animations so i would be happy for any input and ideas! Also the tree is supposed to grow differently every time and not look the same if that is possible. Thanks! <!DOCTYPE html> <html lang="en"> <head> <title>tree</title> </head> <body onload="init();"> <canvas id="canvas" width="1200" height="600" ></canvas> <script type="text/javascript" > init = function() { var x1 = 400; var

Threejs - Mouse interaction with large resolutions

由 被刻印的时光 ゝ 提交于 2019-12-24 07:14:35
问题 I am running into an issue with mouse interaction/detection with objects in threejs on large resolutions monitors. I was able to follow the examples on threejs example site and everything works well on most resolutions (1920x1080). The code I am using to detect an interesection: mouse.x = ( ( event.offsetX ) / CANVAS_WIDTH ) * 2 - 1; mouse.y = - ( ( event.offsetY) / CANVAS_HEIGHT ) * 2 + 1; var vector = new THREE.Vector3( mouse.x, mouse.y, 1); projector.unprojectVector( vector, camera ); var

Android Custom View - Optimizing Redrawing while Fling

由 两盒软妹~` 提交于 2019-12-24 07:07:28
问题 I have a custom view that represents something like a photo-collage. I need to support the following: Fling Zoom In Zoom Out Here's what I currently do: onDraw: Look out for the number of images to be drawn. Look out for the images to be drawn and their locations and angles If the image had been downloaded (from the server), draw it. Otherwise, draw some default image. onTouch: action = DOWN: Record X,Y action = MOVE: Record X,Y; get the delta; record "new origins" and invalidate the UI. This

Multiple Charts Latency issue, SVG or HTML5 Canvas?

由 拈花ヽ惹草 提交于 2019-12-24 07:01:00
问题 I'm looking to build a dynamic and interactive multiple charts using Javascript. In this exercise involves moving/panning multiple charts simultaneously. I've implemented this exercise with varies charting libraries with SVG. However, I found when I started to have more than 12 charts, while panning the rendering become sluggish. Highcharts library seems to shown huge lag. Here is an example of what I'm trying to do.. This is running with amCharts, seems to be a little better. I'll add

how to fill cannvas circle arc with different image?

由 烈酒焚心 提交于 2019-12-24 06:47:47
问题 i am creating wheel of fortune circle using html5 canvas. It's working fine with fill style color. i want two(2) different images in random slices fill style pattern. How to i achieve that. here is my JS function rand(min, max) { return Math.random() * (max - min) + min; } var color = ['#fbc','#f88','#fbc','#f88','#fbc','#f88', "#fbc", "#f67"]; var label = ['10', '200', '50', '100', '5', '500', '0', "jPOT"]; var slices = color.length; var sliceDeg = 360/slices; var deg = rand(0, 360); var

How to draw a full coordinate system with Easeljs?

由 白昼怎懂夜的黑 提交于 2019-12-24 06:42:59
问题 I would like to create a complete coordinate system by drawing it on the canvas. It should look similar to this: My question is, what is the code to create this image with Easeljs? Please ignore the headline "Koordinatensystem" and the red cross in the center. I did this once in flash but used the line tool, arrow tool, label tool, etc. Now porting everything to HTML5 and trying to create everything only using code :) 回答1: Well, I do not know if this can be called optimized code, but it is

get canvas mouse coordinates after transformation using ctx.getTransformation()

由 不打扰是莪最后的温柔 提交于 2019-12-24 06:40:32
问题 I am using the following function to get mouse coordinates on canvas after performing rotations. function getWindowToCanvas(canvas, x, y) { const ctx = canvas.getContext("2d"); var transform = ctx.getTransform(); var rect = canvas.getBoundingClientRect(); var screenX = (x - rect.left) * (canvas.width / rect.width); var screenY = (y - rect.top) * (canvas.height / rect.height); if (transform.isIdentity) { return { x: screenX, y: screenY }; } else { console.log(transform.invertSelf()); const
订阅 canvas