中国語の文字を解読不能な内容に変換するエスケープ

Question

私は以下のコードサンプルのようなSVG文字列を持っています。私はそれを背景イメージとして使用しています。私はステップの下にやっている画像に変換する

：

var asImage = "data:image/svg+xml; base64," + window.btoa(unescape(encodeURIComponent(markupDataStr))); 

しかし、問題があり、SVGはいくつかの中国語テキスト測試が含まれています。 encodeURIComponentとunescapeを実行すると、中国語のテキストがこのような読めない文字に変換されています（測試）。

ただし、ここの例では、上記のテキストは変更されません。私はここに何かを逃していますか復号するdecodeURIComponentを使用し、符号化するためにencodeURIComponentを用い

var str = window.holder.value; 
 

 
var asImage = "data:image/svg+xml; base64," + unescape(encodeURIComponent(str)); 
 

 
console.log(str);

<textarea id="holder"> 
 
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:0;top:0;-ms-transform:scale(1, -1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1);cursor:crosshair" 
 
    class="design-review-container" viewBox="-1331.9027181688125 -1000 2663.805436337625 2000" width="931" height="699" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <g type="Pencil" guid="b36bf28d-78f7-434a-9601-ee1b7e3cb645"> 
 
     <path fill="none" stroke="rgba(255,40,79,1)" stroke-width="21.459227467811047" undefined="#ff284f" transform="translate(96.99569069094242, -24.034317300384487) rotate(0)" 
 
      guid="b36bf28d-78f7-434a-9601-ee1b7e3cb645" d="M5.5317294330442195 128.46922431039877 L11.444938779729966 128.4692243103988 L17.657896065648615 128.06047712053572 L23.334940369302373 127.19756638638036 L25.751090424937402 126.75248611297391 L31.473551083020382 125.32187094845317 L37.19601174110336 123.89125578393244 L43.776841497898815 120.7439024219868 L50.35767125469421 117.59654906004114 L56.36625494568132 113.59082659938306 L62.37483863666846 109.58510413872497 L67.81117626184725 104.72101257935444 L73.24751388702607 99.85692101998391 L78.68385151220495 94.42058339480509 L84.12018913738378 88.98424576962626 L88.98428069675428 82.97566207863913 L93.84837225612482 76.96707838765201 L96.99572561807044 71.24461772956903 L100.14307898001606 65.52215707148605 L102.71818627615339 59.22745034759479 L105.29329357229075 52.93274362370352 L107.58227783552393 46.06579083400395 L109.87126209875713 39.198838044304374 L111.30187726327789 32.04576222170065 L112.73249242779865 24.892686399096934 L113.59086152651106 17.739610576493213 L114.44923062522356 10.586534753889492 L115.02147669103185 3.7195819641899206 L115.59372275684011 -3.147370825509647 L115.59372275684011 -9.442077549400928 L115.59372275684011 -15.736784273292201 L114.73535365812766 -21.745367964279318 L113.87698455941522 -27.75395165526644 L112.44636939489446 -33.47641231334942 L111.01575423037373 -39.1988729714324 L107.86840086842811 -45.20745666241953 L104.72104750648244 -51.216040353406655 L100.42920201292024 -57.224624044393764 L96.137356519358 -63.23320773538089 L90.41489586127501 -69.24179142636801 L84.69243520319206 -75.25037511735513 L78.11160544639664 -80.4005897096298 L71.53077568960119 -85.55080430190449 L62.947084702476715 -91.27326495998746 L54.3633937153523 -96.99572561807042 L46.06582576113199 -101.28757111163267 L37.76825780691165 -105.57941660519492 L28.89844378688302 -109.29901603294886 L20.028629766854422 -113.01861546070279 L10.872692713921666 -116.16596882264841 L1.716755660988909 -119.31332218459406 L-7.725304424848005 -121.88842948073142 L-17.16736451068492 -124.46353677686875 L-25.17880943200109 -125.60802890848535 L-33.19025435331724 -126.75252104010195 L-41.20169927463342 -127.6108901388144 L-49.21314419594958 -128.46925923752684 L-56.93846608436159 -128.1831362046227 L-64.6637879727736 -127.89701317171853 L-70.95849469666489 -126.4663980071978 L-77.25320142055615 -125.03578284267704 L-83.54790814444743 -121.60230644782723 L-89.8426148683387 -118.16883005297743 L-96.28038310868206 -115.45066124038806 L-102.24127962751848 -110.92037988607237 L-107.00999684258764 -104.72104750648248 L-115.5936878297121 -94.70674135483726 " 
 
      style="pointer-events: none;" /> 
 
    </g> 
 
    <g type="Text" clip-path="url(#29caee92-3443-41a7-9897-efc666d77842)" guid="29caee92-3443-41a7-9897-efc666d77842"> 
 
     <rect fill="rgba(255,40,79,0)" stroke="rgba(255,40,79,1)" stroke-width="21.459227467811047" undefined="#ff284f" font-size="51.50214592274665" 
 
      text-decoration="normal" font-style="normal" font-weight="normal" font-family="Helvetica Neue" transform="translate(-396.2804005722461, -22.019982508494266) rotate(0) scale(1, -1)" 
 
      guid="29caee92-3443-41a7-9897-efc666d77842" x="-257.51072961373393" y="-89.25889524096924" height="178.53339592274642" 
 
      width="515.0214592274677" style="pointer-events: none;" /> 
 
     <text alignment-baseline="middle" style="pointer-events:none" fill="#ff284f" undefined="#ff284f" font-size="51.50214592274665" 
 
      text-decoration="normal" font-style="normal" font-weight="normal" font-family="Helvetica Neue" transform="translate(-396.2804005722461, -22.019982508494266) rotate(0) scale(1, -1)" 
 
      guid="29caee92-3443-41a7-9897-efc666d77842"> 
 
      <tspan x="-231.75965665236072" y="-22.306105541398594">t4mkgl35yhm5y</tspan> 
 
      <tspan x="-231.75965665236072" y="44.64668415817205">測試</tspan> 
 
     </text> 
 
     <clipPath id="29caee92-3443-41a7-9897-efc666d77842" style="pointer-events: none;"> 
 
      <rect guid="29caee92-3443-41a7-9897-efc666d77842" fill="rgba(255,40,79,0)" stroke="rgba(255,40,79,1)" stroke-width="21.459227467811047" 
 
       undefined="#ff284f" font-size="51.50214592274665" text-decoration="normal" font-style="normal" font-weight="normal" 
 
       font-family="Helvetica Neue" transform="translate(-396.2804005722461, -22.019982508494266) rotate(0) scale(1, -1)" 
 
       x="-257.51072961373393" y="-89.25889524096924" height="178.53339592274642" width="515.0214592274677" /> 
 
     </clipPath> 
 
    </g> 
 
</svg> 
 
</textarea>

Answer 1

。

escapeを使用してエンコードする場合、デコードにはunescapeを使用してください。

ので、unescape(encodeURIComponent(markupDataStr))は仕方によって decodeURIComponent(encodeURIComponent(markupDataStr))

する必要があり、escapeは推奨されません。