Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2017-12-17T10:15:49+01:00Les derniers messages parus sur le forum de Zeste de Savoir.Html5 canvas image base64 vide, pourquoi ?, message #1688602017-12-17T10:15:49+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/9871/html5-canvas-image-base64-vide-pourquoi/?page=1#p168860<figure>
<blockquote>
<p>Je ne comprends pas trop ta question ?</p>
<p>Mais oui tout est du même nom de domaine si c’est ça dont tu parles.</p>
</blockquote>
<figcaption><a href="https://zestedesavoir.com/forums/sujet/9871/html5-canvas-image-base64-vide-pourquoi/?page=1#p168853">arglow</a></figcaption>
</figure>
<p>Le navigateur possède une protection qui bloque le traitement d’image provenant d’une site/domaine différent.</p>
<hr>
<p>Dans ton cas, c’est que tu dois attendre le chargement de l’image. image.onload S’exécute après la fin de ta fonction. Et non selon l’ordre des lignes.</p>
<p>La suite de ton code doit être dans :</p>
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="nx">image</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">drawImage</span><span class="p">(</span><span class="nx">image</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">500</span><span class="p">,</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">};</span>
</pre></div>
</td></tr></table></div>
<p>Car tu dois attendre que l’image soit charger avant de vouloir la voir. <img alt=";)" src="/static/smileys/clin.png"></p>
<p>Pour t’aider à comprendre : <a href="https://jsfiddle.net/5c1uq2ke/">https://jsfiddle.net/5c1uq2ke/</a></p>Html5 canvas image base64 vide, pourquoi ?, message #1688532017-12-16T23:15:45+01:00arglow/@arglowhttps://zestedesavoir.com/forums/sujet/9871/html5-canvas-image-base64-vide-pourquoi/?page=1#p168853<p>Je ne comprends pas trop ta question ?</p>
<p>Mais oui tout est du même nom de domaine si c’est ça dont tu parles.</p>Html5 canvas image base64 vide, pourquoi ?, message #1688462017-12-16T19:34:19+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/9871/html5-canvas-image-base64-vide-pourquoi/?page=1#p168846<p>L’image est-elle du même domaine de ton site ?</p>Html5 canvas image base64 vide, pourquoi ?, message #1688422017-12-16T17:49:47+01:00arglow/@arglowhttps://zestedesavoir.com/forums/sujet/9871/html5-canvas-image-base64-vide-pourquoi/?page=1#p168842<p>Bonjour à tous,</p>
<p>Je viens demander votre aprés plusieurs heures de test en vain.</p>
<p>Pour m’entrainer sur canvas j’essaye de générer un pdf hd (300 dpi) de mon canvas. Après m’être rendu compte que l’image du canvas était de mauvaise qualité j’essaye de créer dynamiquement une image d’un premier canvas en très grand et l’insérer redimensionner dans un second canvas pour tenter d’améliorer le rendu final du pdf qui est généré.</p>
<p>Voila pour mon test.</p>
<p>Malheureusement, je ne comprend pas pourquoi mon pdf est vide …</p>
<p>Voila mon code : </p>
<div><table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114</pre></div></td><td class="code"><div class="codehilite"><pre><span></span><span class="p"><</span><span class="nt">html</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="nt">body</span><span class="p">{</span>
<span class="k">margin</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">myCanvas</span><span class="p">{</span>
<span class="k">width</span><span class="p">:</span><span class="mi">500</span><span class="kt">px</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span><span class="mi">500</span><span class="kt">px</span><span class="p">;</span>
<span class="k">border</span><span class="p">:</span><span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">red</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">page</span><span class="p">{</span>
<span class="k">border</span><span class="p">:</span><span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">black</span><span class="p">;</span>
<span class="k">width</span><span class="p">:</span><span class="mi">400</span><span class="kt">px</span><span class="p">;</span>
<span class="k">height</span><span class="p">:</span><span class="mi">400</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">interface</span><span class="p">{</span>
<span class="k">background-color</span><span class="p">:</span><span class="mh">#ddd</span><span class="p">;</span>
<span class="k">padding</span><span class="p">:</span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">bloc</span><span class="p">{</span>
<span class="k">border</span><span class="p">:</span><span class="mi">1</span><span class="kt">px</span> <span class="kc">dotted</span> <span class="kc">red</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">canvas</span> <span class="na">id</span><span class="o">=</span><span class="s">"myCanvas"</span><span class="p">></</span><span class="nt">canvas</span><span class="p">></span>
<span class="p"><</span><span class="nt">canvas</span> <span class="na">id</span><span class="o">=</span><span class="s">"canvas2"</span><span class="p">></</span><span class="nt">canvas</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"interface"</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"addText()"</span><span class="p">></span>Ajouter texte<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"save()"</span><span class="p">></span>Enregistrer<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"generatePdf()"</span><span class="p">></span>PDF<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
<span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">fabric</span><span class="p">.</span><span class="nx">Canvas</span><span class="p">(</span><span class="s1">'myCanvas'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">width</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span> <span class="nx">height</span><span class="o">:</span> <span class="mi">500</span> <span class="p">});</span>
<span class="kd">var</span> <span class="nx">bloc</span><span class="p">;</span><span class="c1">//liste des blocs</span>
<span class="kd">function</span> <span class="nx">addText</span><span class="p">(){</span>
<span class="c1">// create a rectangle object</span>
<span class="nx">bloc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">fabric</span><span class="p">.</span><span class="nx">Textbox</span><span class="p">(</span><span class="s1">'Nouveau texte'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">left</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> <span class="nx">top</span><span class="o">:</span> <span class="mi">100</span> <span class="p">});</span>
<span class="nx">canvas</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">bloc</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">save</span><span class="p">(){</span>
<span class="c1">//enregistrement en base 64 de l'image</span>
<span class="kd">var</span> <span class="nx">imgData</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Image</span><span class="p">();</span>
<span class="nx">imgData</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">({</span>
<span class="nx">format</span><span class="o">:</span> <span class="s1">'png'</span><span class="p">,</span>
<span class="nx">multiplier</span><span class="o">:</span> <span class="mi">1</span>
<span class="p">});</span>
<span class="c1">// on enregistre l'image sur le serveur</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s2">"save.php"</span><span class="p">,</span> <span class="p">{</span><span class="nx">image</span><span class="o">:</span> <span class="nx">imgData</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">//console.log(imgData);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'image enregistrée'</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">imgData</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// génère une image en base 64 et créé le pdf avec cette image du canvas</span>
<span class="kd">function</span> <span class="nx">generatePdf</span><span class="p">(){</span>
<span class="c1">// image généré du canvas de personnalisation => image en grande taille</span>
<span class="kd">var</span> <span class="nx">imgData</span> <span class="o">=</span> <span class="nx">save</span><span class="p">();</span>
<span class="c1">//console.log(imgData);</span>
<span class="kd">var</span> <span class="nx">canvasResize</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'canvas2'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvasResize</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">"2d"</span><span class="p">);</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">webkitImageSmoothingEnabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">mozImageSmoothingEnabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">imageSmoothingEnabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">canvasResize</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="mi">500</span><span class="p">;</span>
<span class="nx">canvasResize</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="mi">500</span><span class="p">;</span>
<span class="c1">//on dessine l'image HD sur le nouveau canvas</span>
<span class="kd">var</span> <span class="nx">image</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Image</span><span class="p">();</span>
<span class="nx">image</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">ctx</span><span class="p">.</span><span class="nx">drawImage</span><span class="p">(</span><span class="nx">image</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">500</span><span class="p">,</span> <span class="mi">500</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">image</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">imgData</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">imageResize</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Image</span><span class="p">();</span>
<span class="nx">imageResize</span> <span class="o">=</span> <span class="nx">canvasResize</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">();</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Image resize :'</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">imageResize</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">pdf</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">jsPDF</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span> <span class="s1">'mm'</span><span class="p">,</span> <span class="p">[</span><span class="mi">132</span><span class="p">,</span><span class="mi">132</span><span class="p">]);</span>
<span class="nx">pdf</span><span class="p">.</span><span class="nx">addImage</span><span class="p">(</span><span class="nx">imageResize</span><span class="p">,</span> <span class="s1">'PNG'</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="nx">pdf</span><span class="p">.</span><span class="nx">save</span><span class="p">(</span><span class="s2">"download.pdf"</span><span class="p">);</span>
<span class="c1">//fabric.log('JSON without default values: ', canvas.toJSON());</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
</pre></div>
</td></tr></table></div>
<p>J’ai bien mais 2 canvas avec le contenu : (en rouge le premier en bleu le deuxième).<img alt="Image utilisateur" src="https://img15.hostingpics.net/pics/196913Capture.png"></p>
<p>Par contre l’image générée pour le canvas 2 (imageResize = canvasResize.toDataURL();) est vide : </p>
<p>Je ne comprends absolument pas pourquoi alors que ça fonctionne pour la 1ère.</p>
<p>Et il y a t’il une meilleure façon de produire un pdf HD ?</p>
<p>Merci d’avance pour votre aide.
Florian</p>Outil d'encodage d'image en base64 automatique, message #183482014-08-25T09:42:20+02:00Vayel/@Vayelhttps://zestedesavoir.com/forums/sujet/1133/outil-dencodage-dimage-en-base64-automatique/?page=1#p18348<p>Bonjour,</p>
<p>On en parle <a href="http://www.alsacreations.com/article/lire/1439-data-uri-schema.html">ici</a>.</p>Outil d'encodage d'image en base64 automatique, message #182752014-08-24T20:04:17+02:00FeaturettesAffect/@FeaturettesAffecthttps://zestedesavoir.com/forums/sujet/1133/outil-dencodage-dimage-en-base64-automatique/?page=1#p18275<p>Bonjour à tous,</p>
<p>Je voulais savoir si à votre connaissance il existait un outil qui encode automatiquement les images d'une page donnée en base64.</p>
<p>Pour minifier le CSS et le JS, on a par exemple YUI qui s'exécute avec une simple ligne de commande. Existe-t-il un outil similaire pour encoder en base 64, qui parcourrait des fichiers à la recherche d'images, les convertirait puis modifierait les fichiers avec l'image encodée ?</p>
<p>Merci d'avance <img alt=":)" src="/static/smileys/smile.png"></p>