คำถามติดแท็ก html5-canvas

หลังจากทดลองใช้งานคอมโพสิตและวาดภาพบนผืนผ้าใบตอนนี้ฉันกำลังพยายามลบภาพและคอมโพสิต ฉันจะทำสิ่งนี้ได้อย่างไร ฉันต้องล้างผืนผ้าใบเพื่อวาดภาพอื่น สิ่งนี้สามารถดำเนินต่อไปได้ชั่วขณะหนึ่งดังนั้นฉันไม่คิดว่าการวาดรูปสี่เหลี่ยมผืนผ้าใหม่ทุกครั้งจะเป็นตัวเลือกที่มีประสิทธิภาพที่สุด

1012 javascript  html  canvas  html5-canvas  composite 

อะไรคือวิธีที่ดีที่สุดในการสร้างองค์ประกอบต่าง ๆ ในทันทีและสามารถขยับไปมาได้? ตัวอย่างเช่นสมมติว่าฉันต้องการสร้างสี่เหลี่ยมผืนผ้าวงกลมและรูปหลายเหลี่ยมจากนั้นเลือกวัตถุเหล่านั้นแล้วย้ายไปรอบ ๆ ผมเข้าใจว่า HTML5 ให้สามองค์ประกอบที่สามารถทำให้เป็นไปได้: SVG , ผ้าใบและdiv สำหรับสิ่งที่ฉันต้องการจะทำสิ่งใดองค์ประกอบหนึ่งเหล่านั้นจะให้ประสิทธิภาพที่ดีที่สุด เพื่อเปรียบเทียบวิธีการเหล่านี้ฉันคิดว่าจะสร้างหน้าเว็บที่เหมือนกันสามหน้าซึ่งแต่ละแห่งมีส่วนหัวส่วนท้ายวิดเจ็ตและเนื้อหาข้อความ วิดเจ็ตในหน้าแรกจะถูกสร้างขึ้นอย่างสมบูรณ์ด้วยcanvasองค์ประกอบส่วนที่สองพร้อมsvgองค์ประกอบและส่วนที่สามคือdivองค์ประกอบธรรมดาHTML และ CSS

476 javascript  html  svg  html5-canvas 

ฉันจะปรับขนาด<canvas>องค์ประกอบHTML5 โดยอัตโนมัติเพื่อให้พอดีกับหน้าได้อย่างไร ตัวอย่างเช่นฉันสามารถเพิ่ม<div>ขนาดได้โดยการตั้งค่าheightและwidthคุณสมบัติเป็น 100% แต่<canvas>จะไม่ขยายขนาดใช่หรือไม่

400 javascript  html  html5-canvas 

ฉันกำลังทำงานในโครงการศิลปะแบบกำเนิดที่ฉันต้องการอนุญาตให้ผู้ใช้บันทึกรูปภาพผลลัพธ์จากอัลกอริทึม แนวคิดทั่วไปคือ: สร้างภาพบนผ้าใบ HTML5 โดยใช้อัลกอริทึมกำเนิด เมื่อรูปภาพเสร็จสมบูรณ์อนุญาตให้ผู้ใช้บันทึกผืนผ้าใบเป็นไฟล์รูปภาพไปยังเซิร์ฟเวอร์ อนุญาตให้ผู้ใช้ดาวน์โหลดรูปภาพหรือเพิ่มลงในแกลเลอรีชิ้นส่วนที่ผลิตโดยใช้อัลกอริทึม อย่างไรก็ตามฉันติดอยู่ในขั้นตอนที่สอง หลังจากความช่วยเหลือจาก Google ฉันพบบล็อกโพสต์นี้ซึ่งดูเหมือนจะเป็นสิ่งที่ฉันต้องการ: ซึ่งนำไปสู่รหัส 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 = …

260 javascript  php  ajax  html5-canvas 

ฉันต้องการมีหน้าเว็บที่มีคำที่กึ่งกลางหนึ่งคำ ฉันต้องการให้คำนี้วาดด้วยอนิเมชั่นเช่นที่หน้า "เขียน" คำนั้นในลักษณะเดียวกับที่เราต้องการคือมันเริ่มต้นที่จุดหนึ่งแล้วลากเส้นและเส้นโค้งเมื่อเวลาผ่านไปซึ่งผลลัพธ์สุดท้ายคือ glyph ฉันไม่สนใจว่าสิ่งนี้จะทำด้วย<canvas>หรือ DOM และฉันไม่สนใจว่ามันจะทำกับ JavaScript หรือ CSS การขาดงานของ jQuery จะดี แต่ไม่จำเป็น ฉันจะทำสิ่งนี้ได้อย่างไร ฉันค้นหาอย่างละเอียดโดยไม่มีโชค

229 javascript  css  canvas  html5-canvas  css-shapes 

ฉันใช้เครื่องมือ JavaScript "Canvas2Image" ของ Nihilogic เพื่อแปลงภาพวาดผ้าใบเป็นรูปภาพ PNG สิ่งที่ฉันต้องการตอนนี้คือการเปลี่ยนสตริง base64 ที่เครื่องมือนี้สร้างเป็นไฟล์ PNG จริงบนเซิร์ฟเวอร์โดยใช้ PHP ในระยะสั้นสิ่งที่ฉันกำลังทำคือการสร้างไฟล์ในฝั่งไคลเอ็นต์โดยใช้ Canvas2Image จากนั้นดึงข้อมูลที่เข้ารหัส 64 ฐานและส่งไปยังเซิร์ฟเวอร์โดยใช้ 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: { …

212 php  javascript  base64  html5-canvas 

ฉันต้องการบันทึกผืนผ้าใบของฉันไว้ที่ 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"; } มันทำให้ฉันมีข้อผิดพลาด: ไม่ได้เข้ารหัส SecurityError: ล้มเหลวในการเรียกใช้งาน 'toDataURL' บน 'HTMLCanvasElement': ผืนผ้าใบที่เสียอาจไม่สามารถส่งออกได้ ฉันควรทำอย่างไรดี?

187 javascript  html5-canvas 

ภาพถ่ายจากกล้องดิจิทัลมักถูกบันทึกเป็น JPEG พร้อมแท็ก "การวางแนว" EXIF หากต้องการแสดงอย่างถูกต้องรูปภาพจะต้องหมุน / ทำมิรเรอร์ตามทิศทางที่ตั้งไว้ แต่เบราว์เซอร์จะไม่สนใจข้อมูลที่แสดงภาพ แม้จะอยู่ในเว็บแอปเชิงพาณิชย์ขนาดใหญ่, การสนับสนุนสำหรับการวางแนว EXIF สามารถเป็นจุด ๆ1 แหล่งข้อมูลเดียวกันยังให้บทสรุปที่ดีเกี่ยวกับทิศทางที่แตกต่างกัน 8 แบบที่ JPEG สามารถมี: ภาพตัวอย่างมีให้บริการที่4 คำถามคือวิธีหมุน / ทำมิเรอร์รูปภาพทางฝั่งไคลเอ็นต์เพื่อให้แสดงอย่างถูกต้องและสามารถประมวลผลเพิ่มเติมถ้าจำเป็น มี JS ไลบรารีที่มีการแยกข้อมูล EXIF รวมทั้งแอตทริบิวต์การวางแนวทางที่มี2 Flickr ตั้งข้อสังเกตปัญหาประสิทธิภาพการทำงานเป็นไปได้เมื่อแยกภาพขนาดใหญ่ต้องใช้ webworkers 3 เครื่องมือคอนโซลได้อย่างถูกต้องสามารถ re-ปรับทิศทางภาพที่5 สคริปต์ PHP ในการแก้ปัญหามีให้ที่6

154 javascript  rotation  html5-canvas  exif 

ฉันใช้องค์ประกอบผ้าใบ HTML5 เพื่อปรับขนาดภาพฉันเบราว์เซอร์ของฉัน ปรากฎว่ามีคุณภาพต่ำมาก ฉันพบสิ่งนี้: ปิดใช้งานการแก้ไขเมื่อปรับขนาด <canvas>แต่ไม่ช่วยเพิ่มคุณภาพ ด้านล่างนี้คือรหัส css และ js ของฉันรวมถึงรูปภาพที่เรียกว่า Photoshop และปรับขนาดใน Canvas 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 …

149 javascript  css  html  canvas  html5-canvas 

สำหรับแอปพลิเคชันการวาดภาพฉันกำลังบันทึกพิกัดการเคลื่อนที่ของเมาส์ไปยังอาร์เรย์แล้ววาดด้วย lineTo เส้นที่เกิดจะไม่เรียบ ฉันจะสร้างเส้นโค้งเดียวระหว่างจุดที่รวบรวมทั้งหมดได้อย่างไร ฉัน googled แต่ฉันได้พบเพียง 3 ฟังก์ชั่นสำหรับการวาดเส้น: สำหรับ 2 lineToจุดตัวอย่างการใช้งานเพียงแค่ สำหรับ 3 จุดตัวอย่างquadraticCurveToสำหรับ 4 จุดตัวอย่าง, bezierCurveTo. (ฉันพยายามวาดจุดbezierCurveToทุกๆ 4 จุดในอาร์เรย์ แต่สิ่งนี้ทำให้เกิดการหักงอทุกๆ 4 จุดตัวอย่างแทนที่จะเป็นเส้นโค้งที่ราบรื่นต่อเนื่อง) ฉันจะเขียนฟังก์ชันเพื่อวาดเส้นโค้งที่ราบรื่นโดยมีจุดตัวอย่าง 5 จุดขึ้นไปได้อย่างไร

133 javascript  canvas  html5-canvas  bezier  spline 

รหัสของฉันทำงานได้ดีมากบน 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; } หมายเหตุ: URL รูปภาพของฉัน (src) มาจาก URL โดเมนย่อย

131 javascript  html  html5-canvas 

ฉันต้องการหมุนรูปภาพตามการหมุนเดิมตามที่กล้องกำหนดในข้อมูลภาพ JPEG EXIF เคล็ดลับคือทั้งหมดนี้ควรเกิดขึ้นในเบราว์เซอร์โดยใช้ JavaScript และ<canvas>. JavaScript สามารถเข้าถึง JPEG ซึ่งเป็นอ็อบเจ็กต์ API ไฟล์ในเครื่องข้อมูลภายใน<img>หรือระยะไกล<img>EXIF เพื่ออ่านข้อมูลการหมุนได้อย่างไร คำตอบฝั่งเซิร์ฟเวอร์ไม่ตกลง ฉันกำลังมองหาโซลูชันฝั่งไคลเอ็นต์

126 javascript  jpeg  exif  html5-canvas 

ฉันพยายามเปลี่ยนสิ่งที่ดูเหมือนจะเป็นสีพื้นหลังเริ่มต้นของผืนผ้าใบของฉันจากสีดำเป็นสีโปร่งใส / สีอื่น ๆ - แต่ไม่มีโชค HTML ของฉัน: <canvas id="canvasColor"> CSS ของฉัน: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> ดังที่คุณเห็นในตัวอย่างออนไลน์ต่อไปนี้ฉันมีแอนิเมชั่นบางส่วนต่อท้ายผืนผ้าใบดังนั้นจึงไม่สามารถทำทึบได้: 0; บน id. ดูตัวอย่างสด: http://devsgs.com/preview/test/particle/ มีความคิดอย่างไรในการเขียนทับสีดำเริ่มต้น?

122 css  html  canvas  html5-canvas  three.js 

มีเหตุผลใดบ้างนอกจากประสิทธิภาพในการใช้ WebGL แทน 2D-Canvas สำหรับเกม / แอป2D กล่าวอีกนัยหนึ่งว่าฟังก์ชัน 2D ใดที่ WebGL นำเสนอซึ่งไม่สามารถทำได้อย่างง่ายดายด้วย 2D-Canvas?

114 html  html5-canvas  webgl 

ฉันกำลังพยายามซ้อนผ้าใบสองผืนเข้าด้วยกันและทำให้เป็นผ้าใบสองชั้น ฉันเห็นตัวอย่างที่นี่: <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> แต่ฉันต้องการกำหนดแนวผ้าใบทั้งสองที่ตรงกลางหน้าจอ ถ้าฉันตั้งค่าleftเป็นค่าคงที่ในขณะที่ฉันเปลี่ยนการวางแนวของหน้าจอ (ขณะที่ฉันกำลังทำ aps บน iPad) ผืนผ้าใบจะไม่อยู่ตรงกลางหน้าจอเหมือนกับการทำงานของมัน <div align="center"> ใครสามารถช่วยกรุณา?

108 css  html5-canvas