คำถามติดแท็ก data-uri

ฉันดูที่แหล่งที่มาของ userscript greasemonkey และสังเกตเห็นสิ่งต่อไปนี้ใน CSS: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} ฉันสามารถชื่นชมได้ว่าสคริปต์ greasemonkey ต้องการรวมสิ่งที่สามารถทำได้ภายในแหล่งที่มาแทนที่จะเป็นโฮสต์บนเซิร์ฟเวอร์นั่นชัดเจนเพียงพอ แต่ก่อนหน้านี้ฉันไม่เคยเห็นเทคนิคนี้เลยฉันจึงพิจารณาการใช้งานและดูเหมือนว่าจะมีเหตุผลหลายประการ: มันจะลดปริมาณของคำขอ HTTP ในการโหลดหน้าซึ่งจะช่วยเพิ่มประสิทธิภาพ หากไม่มี CDN ก็จะลดปริมาณการรับส่งข้อมูลที่สร้างขึ้นจากคุกกี้ที่ถูกส่งไปพร้อมกับรูปภาพ ไฟล์ CSS สามารถแคชได้ ไฟล์ CSS สามารถเป็น GZIPPED เมื่อพิจารณาว่า IE6 (เช่น) มีปัญหากับแคชสำหรับภาพพื้นหลังดูเหมือนว่าไม่ใช่ความคิดที่เลวร้ายที่สุด ... นี่เป็นวิธีปฏิบัติที่ดีหรือไม่ดีทำไมคุณไม่ใช้และคุณจะใช้เครื่องมือใดในการเข้ารหัสภาพที่ base64 อัพเดท - ผลการทดสอบ การทดสอบด้วยภาพ: http://fragged.org/dev/map-shot.jpg - 133.6Kb URL ทดสอบ: http://fragged.org/dev/base64.html ไฟล์ CSS เฉพาะ: http://fragged.org/dev/base64.css …

475 css  base64  background-image  data-uri 

ถ้าเช่นคุณไปตามลิงค์: data:application/octet-stream;base64,SGVsbG8= เบราว์เซอร์จะแจ้งให้คุณดาวน์โหลดไฟล์ที่ประกอบด้วยข้อมูลที่เก็บไว้เป็น base64 ในไฮเปอร์ลิงก์นั้น มีวิธีการแนะนำชื่อเริ่มต้นในมาร์กอัปหรือไม่? ถ้าไม่เป็นเช่นนั้นมีวิธีแก้ไข JavaScript หรือไม่

225 javascript  html  url  data-uri  save-as 

ฉันกำลังเล่นกับแนวคิดในการสร้างยูทิลิตี้ zip / unzip ที่ใช้ JavaScript ซึ่งทุกคนสามารถเข้าถึงได้จากเบราว์เซอร์ พวกเขาสามารถลาก zip ลงในเบราว์เซอร์ได้โดยตรงจากนั้นมันจะช่วยให้ดาวน์โหลดไฟล์ทั้งหมดภายใน นอกจากนี้ยังสามารถสร้างไฟล์ zip ใหม่โดยลากไฟล์แต่ละไฟล์เข้ามา ฉันรู้ว่ามันจะดีกว่าถ้าทำบนเซิร์ฟเวอร์ แต่โปรเจ็กต์นี้ก็เพื่อความสนุก การลากไฟล์ลงในเบราว์เซอร์ควรจะง่ายพอหากฉันใช้ประโยชน์จากวิธีการต่างๆที่มีอยู่ (สไตล์ Gmail) หวังว่าการเข้ารหัส / ถอดรหัสน่าจะใช้ได้ ฉันเคยเห็นไลบรารี zip ของ as3 ดังนั้นฉันแน่ใจว่าฉันน่าจะใช้ได้ดี ปัญหาของฉันคือการดาวน์โหลดไฟล์ในตอนท้าย window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' ใช้งานได้ดีใน firefox แต่ไม่ใช่ใน chrome ฉันสามารถฝังไฟล์เป็นรูปภาพได้ใน chrome โดยใช้<img src="data:jpg/image;ba.." />แต่ไฟล์ไม่จำเป็นต้องเป็นรูปภาพ อาจเป็นรูปแบบใดก็ได้ ใครสามารถคิดวิธีแก้ปัญหาอื่นหรือวิธีแก้ปัญหาบางอย่าง?

127 javascript  data-uri 

ฉันจะเปิดภาพใน Canvas ได้อย่างไร ซึ่งเข้ารหัส ฉันใช้ไฟล์ var strDataURI = oCanvas.toDataURL(); ผลลัพธ์คืออิมเมจ 64 ฐานที่เข้ารหัส ฉันจะวาดภาพนี้บนผืนผ้าใบได้อย่างไร? ฉันต้องการใช้strDataURI และสร้างภาพหรือไม่ มันเซ่อ? หากไม่เป็นเช่นนั้นสิ่งที่เป็นไปได้สำหรับการโหลดภาพบนผืนผ้าใบ?

112 image  html  canvas  data-uri 

ฉันรู้เกี่ยวกับURIของข้อมูลซึ่งbase64สามารถใช้ข้อมูลที่เข้ารหัสแบบอินไลน์เช่นรูปภาพ วันนี้ฉันได้รับอีเมลฉบับหนึ่งที่เป็นสแปมซึ่งมีไอคอนเคลื่อนไหว (gif) อยู่ในหัวเรื่อง: นี่คือไอคอนเพียงอย่างเดียว: ดังนั้นสิ่งเดียวที่ฉันคิดได้คือทั้งหมดเกี่ยวกับ URI ของข้อมูลและหาก Gmail อนุญาตให้แทรกอีโมติคอนบางประเภทในหัวเรื่อง ฉันเห็นอีเมลฉบับเต็มโดยละเอียดและชี้ไปที่หัวเรื่องที่รูปภาพด้านล่าง: ดังนั้น GIF มาจาก=?UTF-8?B?876Urg==?=สตริงที่เข้ารหัสซึ่งคล้ายกับโครงร่าง Data URI แต่ฉันไม่สามารถดึงไอคอนออกมาได้ นี่คือแหล่งที่มา HTML ขององค์ประกอบ: เรื่องสั้นขนาดยาวมีอีโมติคอนมากมายจากhttps://mail.google.com/mail/e/XXXที่ที่XXXเป็นเลขฐานสิบหก เอกสารเหล่านี้ไม่มีที่ไหนเลยหรือฉันหาไม่พบ หากเป็นข้อมูลเกี่ยวกับ URI ดังนั้นจะรวมไว้ในหัวเรื่องอีเมลของ Gmail ได้อย่างไร (ฉันส่งต่ออีเมลนั้นไปยังบัญชีอีเมล yahoo โดยเห็น[?]ไอคอนแทน) และถ้าไม่ใช่แล้วสตริงที่เข้ารหัสนั้นจะแยกวิเคราะห์อย่างไร

103 gmail  base64  data-uri 

URI ข้อมูลเป็นวิธีมาตรฐานในการฝังรูปภาพและข้อมูลไบนารีอื่น ๆ ใน HTML และการสนับสนุนเบราว์เซอร์ได้รับการบันทึกไว้อย่างดีบนเว็บ (IE8 เป็นเวอร์ชันแรกของ IE ที่รองรับ Data URI โดยมีขนาดสูงสุด 32 KB ต่อ URI เบราว์เซอร์หลักอื่น ๆ รองรับได้นานกว่า) คำถามของฉันเกี่ยวกับซอฟต์แวร์ไคลเอ็นต์อีเมลเดสก์ท็อปและเว็บเมล เมื่อสร้างอีเมล HTML แนวปฏิบัติมาตรฐานคือการรวมรูปภาพเป็นไฟล์แนบหรือโหลดจากภายนอก (เช่นการติดตามรูปภาพ) ทั้งสองอย่างนี้มีข้อเสีย (ไคลเอนต์บางรายแสดงรายการไฟล์ที่แนบมาทั้งหมดเหล่านี้ในขณะที่หลายไฟล์ปิดกั้นอย่างถูกต้องหรือต้องการให้ผู้ใช้ดำเนินการเพื่อดูรูปภาพภายนอก ดังนั้น Data URI จึงดูเหมือนเป็นวิธีที่ดี แต่ก็ต่อเมื่อผู้อ่านอีเมลรองรับเท่านั้น ใครมีลิงค์ไปยังการศึกษาล่าสุดเกี่ยวกับการสนับสนุนสำหรับคุณลักษณะนี้หรือไม่? หรือสอบสวนเรื่องนี้เลย? ตัวอย่างต่อไปนี้เป็นภาพรวมของการสนับสนุน CSS ซอฟต์แวร์ไคลเอ็นต์ที่ฉันสนใจ ได้แก่ : เดสก์ท็อป (รวมถึงข้อมูลเวอร์ชัน): Outlook, Apple Mail, Thunderbird, Evolution, Lotus Notes, AOL, Eudora …

101 html  email  html-email  email-client  data-uri 

ด้วยการใช้โปรแกรมแก้ไข Rich Text ผู้ใช้ของเราสามารถลากและวางภาพที่บันทึกไว้จากเดสก์ท็อปไปยังโปรแกรมแก้ไข รูปภาพจะปรากฏและแสดงอย่างถูกต้องในหน้าเว็บหลังจากส่ง เนื่องจากรูปภาพไม่ได้อัปโหลดที่ใดก็ได้โปรแกรมแก้ไขจะบันทึกรูปภาพเป็นรูปภาพที่เข้ารหัส base64 <img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFKCAIAAADKUQaBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhepP1p32zb เป็นต้น แต่ไม่ปรากฏขึ้น - ไม่ปรากฏบน iPhone หรือ Outlook สองเวอร์ชันที่แตกต่างกัน ภาพแตกเพียง เราต้องการใช้ base64 เนื่องจากมันทำงานร่วมกับหน้าเว็บอยู่แล้วและความสามารถในการดูรูปภาพหากผู้ใช้ออฟไลน์

86 email  base64  html-email  data-uri 

พื้นหลังของปัญหา: ฉันใช้ katex เพื่อแสดงผลทางคณิตศาสตร์บางอย่างบนหน้าเว็บ จากนั้นฉันต้องการสร้างส่วน PDF ของหน้านั้นดังนั้นฉันจึงสร้างเอกสาร HTML ที่มีส่วนที่จะส่งออกที่อินไลน์ CSS ทั้งหมดและส่งต่อไปยัง renderer ตัวแสดงภาพไม่สามารถเข้าถึงทรัพยากรของโหนดได้นั่นคือสาเหตุที่ทุกอย่างถูกแทรกไว้ มันทำงานได้อย่างสมบูรณ์แบบยกเว้นแบบอักษร ฉันลองทั้ง url-loader และ bas64-inline-loader แต่ฟอนต์ที่สร้างขึ้นไม่ได้ถูกแทรก ฉันตรวจสอบ CSS ที่สร้างขึ้นในดีบักเกอร์และ URL เก่ายังอยู่ในนั้นไม่มี data-URL สำหรับแบบอักษร นี่คือ webpack.config.js ปัจจุบันของฉัน: const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', …

10 javascript  css  webpack  data-uri