ایده جالب و مفیدی بود. (پچ کردن) متشکرم.
پیشنهاد میکنم برای نامگذاری پستهایتان از این روش استفاده کنید، جستجوی آنها (SEO) سادهتر میشود:
http://mohammadshams.blogspot.com/2009/11/keywords-in-blogger-posts-url.html
var image = document.createElement("img"); image.setAttribute("src", "logo.png"); React.createElement("img", { src : "logo.png" });
تفاوت در ساخت تگهای HTML به صورت مجازی بین JavaScript و React این است که React وضعیت تگهایی را که میسازد دنبال میکند. برای مثال فرض کنید نام سه محصول را در یک تگ < ul > نشان دادهایم. React وضعیت اصلی این تگ را که به مرورگر فرستاده، در حافظه دارد و همچنین در اثر تغییر منبع دادهای که برای < ul > مشخص کردهایم (که میتواند ورود اطلاعات به صورت Ajax باشد (مثلا اضافه شدن یک محصول جدید)) وضعیت جدیدی را برای تگ < ul > در حافظه ایجاد میکند. با وجود دو وضعیت برای یک تگ در حافظه، React میتواند تفاوت بین آنها را تشخیص داده و تگ را به روز کند. به این حالت عملکرد React ، اصطلاحا Virtual DOM میگویند.
React رابط کاربری را به صورت یک مدل میبیند و این مدل را با توجه به وضعیت اصلی آن در حافظه دوباره میسازد. برای React مهم نیست که ماهیت تغییر چیست. فقط وضعیتها را مثل دو عکس میبیند و میفهمد که آیا چیزی عوض شدهاست یا نه. دیالوگ React با مرورگر اینطور است: ای تگ < ul > این لیست را نشان بده (لیستی با سه محصول)، و بعد میگوید: ای تگ < ul > این لیست را نشان بده (لیستی با چهار محصول)!
<a href = “http://google.com”> <img src=”google.png”/> </a> // Components <clickableimage/> <linkimage/>
در کد بالا، بخش اول واضح است. عکسی که قابلیت کلیک شدن را دارد. حال فرض کنید یکی از کامپوننتهای <clickableimage/> یا <linkimage/>، همان تصویر قابل کلیک را ایجاد کنند. با نام گذاری واضح کامپوننتها، خوانایی برنامه بهتر میشود. یعنی میدانیم هر کامپوننت چه کاری را برای ما انجام میدهد. با این تصور که اگر تگهای زیاد و طولانی را در بخش رابط کاربری داریم، ارزش استفاده از کامپوننتهای React مشخص میشود.
var ClickableImage = function(props) { return ( <a href={props.href}> <img src={props.src} /> </a> ); }; ReactDOM.render( <ClickableImage href="http://google.com" src="logo.png" />, document.getElementById("targetDivId"));
The C# language itself has changed little in version 6, the main importance of the release being the introduction of the Roslyn .NET Compiler Platform. However the New features and improvements that have been made to C# are welcome because they are aimed at aiding productivity. Paulo Morgado explains what they are, and how to use them.
DuoCode is an alternative compiler, powered by Microsoft® Roslyn, and integrated in Visual Studio.
It magically cross-compiles your C# 6.0 code into high-quality readable JavaScript code, enabling rapid development of web applications utilizing the extensive features of the C# language, the Visual Studio IDE, and the .NET Framework base class libraries.
<configuration>
<system.net>
<connectionManagement>
<add address="*" maxconnection="100" />
</connectionManagement>
</system.net>
</configuration>
errno_t memcpy_s(void *dest, rsize_t dmax, const void *src, rsize_t smax)
//pro.h
// We forbid using dangerous functions in IDA Pro
#ifndef USE_DANGEROUS_FUNCTIONS
#if defined(__BORLANDC__) && (__BORLANDC__ < 0x560 || __BORLANDC__ >= 0x580) // for BCB5 (YH)
#include <stdio.h>
#endif
#undef strcpy
#define strcpy dont_use_strcpy // use qstrncpy
#define stpcpy dont_use_stpcpy // use qstpncpy
#define strncpy dont_use_strncpy // use qstrncpy
#define strcat dont_use_strcat // use qstrncat
#define strncat dont_use_strncat // use qstrncat
#define gets dont_use_gets // use fgets
#define sprintf dont_use_sprintf // use qsnprintf
#define snprintf dont_use_snprintf // use qsnprintf
#define wsprintfA dont_use_wsprintf // use qsnprintf
#endif
- طول عکس خروجی نهایی 250 پیکسل است.
- فونت متن 10 پیکسل هست و عرض هر خط 17 پیکسل.
- حداکثر تعداد خطِ نمایش متن، 3 خط است و اگر متن برای نمایش، به 3 خط بیشتر نیاز داشت، اضافهی متن را به صورت 3 نقطه نمایش میدهیم (مثل عکس بالا).
- عرض بارکد 50 پیکسل است.
- فاصله بین بارکد و متن 5 پیکسل است.
public static class BarcodeHelper { public static string GenerateBarcodeWithText(string input, string textBelow) { // barcode: 50 pixels // margin: top 5 pixels // height of each text line is 17 pixels // text: maximum 3 lines // each 30 letters is: 1 line var eachLineHeight = 17; var eachLineLetters = 30; var maximumLines = 3; var maximumTextHeight = eachLineHeight * maximumLines; var resultWidth = 250; var barcodeHeight = 50; var textY = barcodeHeight + 5; // each 30 letters is: 1 line for example input length is 150 letters and for show 100 letters we need (150 / 30) 5 lines // each line is 17 pixels and text height will be (17 * 5) 102 pixels var textHeight = (textBelow.Length / eachLineLetters) * eachLineHeight; // if height of text be greater than (eachLineHeight * maximumLines) we use maximum text height (eachLineHeight * maximumLines) textHeight = textHeight > maximumTextHeight ? maximumTextHeight : textHeight; // if text height be less than 1 line we set 1 line height (17 pixels) to the text height // text height minimum is equal 1 linle (17 pixels) textHeight = textHeight < eachLineHeight ? eachLineHeight : textHeight; var resultHeight = textY + textHeight; } }
چون ما از Bitmap و Image استفاده میکنیم، پس به پکیچ System.Drawing.Common نیاز داریم:
<ItemGroup> <PackageReference Include="System.Drawing.Common" Version="6.0.0" /> </ItemGroup>
اولین کاری که انجام میدهیم، یک Bitmap را ایجاد میکنیم و بعد یک مستطیل را به اندازهی خود Bitmap ایجاد میکنیم و با کلاس Graphics، به نارنجی، رنگش میکنیم و داخل Bitmap میریزیم و در نهایت عکس ایجاد شده را در حافظهی رم ذخیره میکنیم.
- Bitmap فضایی را در اختیار ما قرار میدهد که داخلش هر چیزی را ترسیم کنیم.
- Graphics به ما کمک میکند که عملیات گرافیکی را نظیر رنگ آمیزی، ترسیم عکس و ... روی یک شیء انجام دهیم.
- MemoryStream برای ذخیره سازی موقت در حافظهی رم به کار میاد؛ عکس ایجاد شدهی تا این لحظه را که یک مستطیل نارنجی رنگ هست، در داخل رم ذخیره میکنیم.
#region MainBitmap var mainBitmap = new Bitmap(resultWidth, resultHeight); using var rectangleGraphics = Graphics.FromImage(mainBitmap); { var rectangle = new Rectangle(0, 0, resultWidth, resultHeight); rectangleGraphics.FillRectangle(Brushes.OrangeRed, rectangle); } using var rectangleStream = new MemoryStream(); { mainBitmap.Save(rectangleStream, ImageFormat.Png); } #endregion
خروجی تا این لحظه:
حالا باید بارکد را ایجاد کنیم و عکس خروجی بارکد را داخل این مستطیل بریزیم؛ برای اینکار از کتابخانه BarcodeLib استفاده میکنیم:
private static Bitmap GenerateBarcodeImage(string input, int width, int height) { var barcodeInstance = new Barcode(); var barcodeImage = barcodeInstance.Encode(BarcodeLib.TYPE.CODE39, input, Color.Black, Color.OrangeRed, width, height); using var barcodeStream = new MemoryStream(); { barcodeImage.Save(barcodeStream, ImageFormat.Png); } return (Bitmap)Image.FromStream(barcodeStream); }
و الان این عکس بارکد را داخل مستطیل اصلی میریزیم و هر دو را Merge میکنیم:
#region Barcode var barcodeImage = GenerateBarcodeImage(input, resultWidth, barcodeHeight); #endregion #region MergedRectangleAndBarcode var newMainBitmap = (Bitmap)Image.FromStream(rectangleStream); var newBarcodeBitmap = barcodeImage; using var newRectangleGraphics = Graphics.FromImage(newMainBitmap); { newRectangleGraphics.DrawImage(newBarcodeBitmap, 0, 0); } using var mergedRectangleAndBarcodeStream = new MemoryStream(); { newMainBitmap.Save(mergedRectangleAndBarcodeStream, ImageFormat.Png); } #endregion
خروجی تا این لحظه :
حالا باید 5 پیکسل از پایین بارکد فاصله بگیریم و متن را بنویسیم.
برای اینکار از یک مستطیل کمک میگیریم. یعنی یک مستطیل بدون هیچ رنگ و Border ـی را پایین این بارکد ایجاد میکنیم، چرا؟ دلیل این است که میخواهیم متنمان را به صورت وسط چین، از راست و چپ، و وسط از بالا و پایین قرار بدیم و برای اینکار میگیم این نسبت وسط چین بودن از راست و چپ، وسط بودن از بالا و پایین را از مستطیل پایین بارکد کمک بگیر، خلاصهاش میشود اینکه از مستطیلِ پایینِ بارکد برای وسط چین بودن متن از راست و چپ و وسط بودن از بالا و پایین استفاده میکنیم.
#region WriteText var barcodeBitmap = (Bitmap)Image.FromStream(mergedRectangleAndBarcodeStream); using var graphics = Graphics.FromImage(barcodeBitmap); { using var font = new Font("Tahoma", 10); { var rect = new Rectangle(0, textY, resultWidth, textHeight); var sf = new StringFormat(); sf.Alignment = StringAlignment.Center; sf.Trimming = StringTrimming.EllipsisCharacter; sf.FormatFlags = StringFormatFlags.DirectionRightToLeft; sf.LineAlignment = StringAlignment.Center; graphics.DrawString(textBelow, font, Brushes.Black, rect, sf); //graphics.DrawRectangle(Pens.Green, rect); } } using var finalStream = new MemoryStream(); { barcodeBitmap.Save(finalStream, ImageFormat.Png); } #endregion
graphics.DrawString میگوید textBelow را با font تاهوما و با رنگ سیاه، داخل rect (مستطیل) و با این تنظیماتِ متن بریز.
Alignment متن را وسط چین میکند (این وسط چین شدن نسبت به مستطیل پایین بارکد است که هیچ رنگ و Border ـی ندارد) .
LineAlignment متن را از بالا و پایین میارد وسط (این وسط شدن نسبت به مستطیل پایین بارکد است که هیچ رنگ و Border ـی ندارد).
EllipsisCharacter اگر متن طولانی باشد، اضافه متن را به صورت سه نقطه نمایش میدهد.
DirectionRightToLeft متن را RTL میکند.
خروجی نهایی:
عکس نهایی به صورت Stream ذخیره شدهاست، آنرا به فرمت Base64 تبدیل میکنیم و برگشت میزنیم.
return Convert.ToBase64String(finalStream.ToArray());
برای نمایش یک آرایه بایتی که به فرمت Base64 تبدیل شده، به این روش عمل میکنیم:
<img src="data:image/png;base64, @BarcodeHelper.GenerateBarcodeWithText("barcode text", "below text")" />
چون برای ایجاد بارکد از تایپ 39 استفاده کردهایم و تایپ 39 فقط حروف بزرگ انگلیسی را پشتیبانی میکند، پس برای اینکه دچار خطا نشویم، میتوانیم ابتدای متدمان، از این کد استفاده کنیم:
// Type 39 doesn't support lower case letters, for prevent exception, we convert all input letters to upper case // more details: https://www.dntips.ir/newsarchive/details/18019 input = input.ToUpperInvariant();
همچنین جهت تشخیص خودکار راست به چک بودن متن پایین بارکد، میتوان از متد ContainsFarsi در پکیج DNTPersianUtils.Core استفاده کرد:
if (textBelow.ContainsFarsi()) sf.FormatFlags = StringFormatFlags.DirectionRightToLeft;
<td *ngFor="let item of headerItems" *ngIf="item.visible">{{ item?.name }}</td>
<ng-container *ngFor="let item of headerItems"> <td *ngIf="item.visible">{{ item?.name }}</td> </ng-container>